import { type FC, useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';

import { IconX } from '@material-hu/icons/tabler';
import Dialog from '@material-hu/mui/Dialog';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuFormSearch from '@material-hu/components/design-system/Inputs/Search/form';

import { useAuth } from 'src/contexts/JWTContext';
import { getMembersToShow } from 'src/pages/dashboard/Conversations/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import Scrollbar from 'src/components/Scrollbar';

import { useGetConversationMembers } from '../../../hooks/useConversationsQueries';
import ThreadInfiniteList from '../../shared/ThreadInfiniteList';

import MembersList from './MembersList';

type ShowAllMembersType = {
  open: boolean;
  onClose: () => void;
  isAdmin: boolean;
  membersCount: number;
};

const ShowAllMembers: FC<ShowAllMembersType> = props => {
  const { open, isAdmin, onClose, membersCount } = props;
  const { t } = useLokaliseTranslation(['chat', 'general', 'competencies']);
  const { id } = useParams();
  const { user } = useAuth();

  const form = useForm({
    defaultValues: {
      filter: '',
    },
  });

  const { filter } = form.watch();

  const {
    members: allMembers,
    hasNextPage,
    ...listWrapperProps
  } = useGetConversationMembers({
    id,
    query: filter,
    enabled: open,
  });

  const members = getMembersToShow(false, allMembers, user?.id);
  useEffect(() => {
    if (!open) {
      form.reset();
    }
  }, [open]);

  return (
    <Dialog
      open={open}
      onClose={onClose}
      PaperProps={{ style: { width: 500 } }}
    >
      <DialogTitle>
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            mb: 2,
          }}
        >
          <Stack>
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('chat:groups.all_members')}
            </Typography>
            <Typography variant="globalXXS">
              {t('competencies:competency_profile_table.total_audience_cell', {
                count: membersCount,
              })}
            </Typography>
          </Stack>

          <IconButton onClick={onClose}>
            <IconX />
          </IconButton>
        </Stack>
        <FormProvider {...form}>
          <HuFormSearch
            name="filter"
            inputProps={{
              variant: 'custom',
              onChange: () => {},
            }}
          />
        </FormProvider>
      </DialogTitle>
      <Scrollbar>
        <DialogContent sx={{ overflow: 'visible' }}>
          <Stack>
            <ThreadInfiniteList
              isSuccess={!!members?.length}
              isEmpty={!members?.length}
              noResultsLabel={t('general:no_results')}
              hasNextPage={hasNextPage || false}
              isLoading={listWrapperProps.isLoading}
              listWrapperProps={listWrapperProps}
            >
              <MembersList
                channelId={id || ''}
                isAdmin={isAdmin}
                members={members}
                userId={user?.id}
              />
            </ThreadInfiniteList>
          </Stack>
        </DialogContent>
      </Scrollbar>
    </Dialog>
  );
};

export default ShowAllMembers;
