import { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { EVENTS_SOCKETS } from 'src/constants/sockets';
import useSocket from 'src/contexts/SocketContext';
import useGeneralError from 'src/hooks/useGeneralError';
import * as groupsService from 'src/services/groupsService';

import { useCriteria } from 'src/components/Audience/criteriaContext';
import useSegmentationCriteria from 'src/components/Audience/hooks/useSegmentationCriteria';
import { Module } from 'src/components/Audience/module';
import FixedActionFooter from 'src/components/FixedActionFooter';

import {
  GROUP_MANAGEMENT_MAX_CONTENT_WIDTH,
  GROUP_MANAGEMENT_SIDEBAR_WIDTH,
} from '../constants';
import { groupsKeys } from '../queries';
import { groupRoutes } from '../routes';

type ManageMembersProps = {
  onClose: () => void;
};

const ManageMembers: FC<ManageMembersProps> = props => {
  const { onClose } = props;

  const [templateCreated, setTemplateCreated] = useState(false);

  const { setCreatingTemplate, criteriaSelected } = useCriteria();
  const { t } = useTranslation(['group']);
  const socket = useSocket();
  const showGeneralError = useGeneralError();
  const navigate = useNavigate();
  const { id: groupIdParam } = useParams();
  const [searchParams] = useSearchParams();
  const groupId = searchParams.get('groupId');

  const id = groupId || groupIdParam;

  useEffect(() => setCreatingTemplate(true), []);

  useEffect(() => {
    const finishTemplate = () => {
      setTemplateCreated(true);
      setCreatingTemplate(false);
    };

    socket.listenEvent(EVENTS_SOCKETS.GROUP_TEMPLATE_COMPLETED, finishTemplate);

    return () => {
      socket.closeEvent(
        EVENTS_SOCKETS.GROUP_TEMPLATE_COMPLETED,
        finishTemplate,
      );
    };
  }, []);

  const goGroupsList = () => navigate(groupRoutes.base());

  const {
    component: assignPeopleComponent,
    save,
    isLoading,
    disabledSave,
  } = useSegmentationCriteria({
    resourceId: Number(id),
    service: {
      createResourceTemplate: groupsService.createMembersPolicyTemplate,
      getResourceCriteria: groupsService.getMembersPolicyCriteria,
      getResourceTemplateCriteria:
        groupsService.getMembersPolicyTemplateCriteria,
      getResourceTemplateUsers: groupsService.getMembersPolicyTemplateUsers,
      updateTemplateCriteria: groupsService.updateMembersTemplateCriteria,
      deleteResourceTemplate: groupsService.deleteMembersPolicyTemplate,
      updateResourceCriteria: groupsService.updateMembersPolicyCriteria,
      customGetIndividualCriteriaUsers:
        groupsService.getMembersPolicyTemplateIndividualCriteriaUsers,
    },
    queryKeys: {
      resourceTemplateCriteria: groupsKeys.groupPolicyTemplateCriteria,
      resourceTemplateUsers: groupsKeys.groupPolicyTemplateUsers,
      customKeyIndividualCriteriaUsers:
        groupsKeys.groupPolicyTemplateIndividualCriteriaUsers,
    },
    behaviourSettings: {
      allowsMultipleSegmentedCriteria: false,
      skipAllCollaboratorsDrawer: true,
    },
    goBack: goGroupsList,
    onCreateResourceTemplateError: (err: any) => showGeneralError(err),
    templateCreated,
    module: Module.GROUPS,
  });

  return (
    <Stack sx={{ gap: 2, flex: 1 }}>
      {assignPeopleComponent}
      <FixedActionFooter
        left={GROUP_MANAGEMENT_SIDEBAR_WIDTH}
        maxWidth={GROUP_MANAGEMENT_MAX_CONTENT_WIDTH}
        actions={
          <>
            <Button
              variant="tertiary"
              size="large"
              onClick={onClose}
            >
              {t('group:close_manage_members')}
            </Button>
            <Button
              variant="primary"
              size="large"
              onClick={save}
              loading={isLoading}
              disabled={criteriaSelected.length === 0 || disabledSave}
            >
              {t('group:save')}
            </Button>
          </>
        }
      />
    </Stack>
  );
};

export default ManageMembers;