import { Fragment, useMemo, useState } from 'react';

import { isNil } from 'lodash-es';
import {
  IconBuildingSkyscraper,
  IconUsers,
  IconUsersGroup,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

import IndividualSelectionSummaryCard from 'src/components/Audience/CriteriaSelectionSummaryCards/IndividualSelectionSummaryCard';
import SelectionCriteriaCard from 'src/components/Audience/components/SelectionCriteriaCard';

import { type AudienceQueryForm, type ConditionWithId } from '../types';

import AllSelectionSummaryCard from './components/AllSelectionSummaryCard';
import CriteriaSelectionDropdown from './components/CriteriaSelectionDropdown';
import SegmentationSummaryCard from './components/SegmentationSummaryCard';
import useAllSelection from './hooks/useAllSelection';
import useIndividualSelection from './hooks/useIndividualSelection';
import useSegmentationSelection from './hooks/useSegmentationSelection';
import {
  type AssignSegmentationConditionType,
  SegmentationCondition,
  type SegmentationConditionAll,
  type SegmentationConditionUsers,
} from './types';
import { isSegmentationCondition } from './utils';

type AssignmentStepContentProps = {
  onAddDirectCondition: (condition: SegmentationConditionUsers) => void;
  onAddAllCondition: (condition: SegmentationConditionAll) => void;
  onAddSegmentationCondition: (
    condition: AssignSegmentationConditionType,
  ) => void;
  onReplaceCondition: (
    conditionId: string,
    newCondition: SegmentationConditionUsers | AssignSegmentationConditionType,
  ) => void;
  onRemoveCondition: (condition: ConditionWithId) => void;
  formAudienceQuery: AudienceQueryForm;
};

const AssignmentStepContent = (props: AssignmentStepContentProps) => {
  const {
    onAddDirectCondition,
    onAddAllCondition,
    onAddSegmentationCondition,
    onReplaceCondition,
    onRemoveCondition,
    formAudienceQuery,
  } = props;

  const { t } = useLokaliseTranslation(['competencies', 'audience']);

  const [editingIndividualConditionId, setEditingIndividualConditionId] =
    useState<string | null>(null);
  const [editingSegmentationConditionId, setEditingSegmentationConditionId] =
    useState<string | null>(null);

  const alreadyAssigned = formAudienceQuery.conditions.length > 0;

  const hasSegmentationAssignment = useMemo(
    () =>
      formAudienceQuery.conditions.some((c: ConditionWithId) =>
        isSegmentationCondition(c),
      ),
    [formAudienceQuery.conditions],
  );
  const hasIndividualAssignment = useMemo(
    () =>
      formAudienceQuery.conditions.some(
        (c: ConditionWithId) => c.type === SegmentationCondition.USERS,
      ),
    [formAudienceQuery.conditions],
  );
  const showCriteriaSelectionDropdown =
    alreadyAssigned &&
    ((hasIndividualAssignment && !hasSegmentationAssignment) ||
      (!hasIndividualAssignment && hasSegmentationAssignment));

  const handleConfirmIndividualSelection = (
    values: SegmentationConditionUsers,
  ) => {
    if (!isNil(editingIndividualConditionId)) {
      onReplaceCondition(editingIndividualConditionId, values);
      setEditingIndividualConditionId(null);
    } else {
      onAddDirectCondition(values);
    }
  };

  const handleConfirmSegmentationSelection = (
    values: AssignSegmentationConditionType,
  ) => {
    if (!isNil(editingSegmentationConditionId)) {
      onReplaceCondition(editingSegmentationConditionId, values);
      setEditingSegmentationConditionId(null);
    } else {
      onAddSegmentationCondition(values);
    }
  };

  const {
    individualSelectionDrawer,
    closeIndividualSelectionDrawer,
    showIndividualSelectionDrawer,
  } = useIndividualSelection({
    onConfirm: values => {
      const individualCondition = values as SegmentationConditionUsers;
      handleConfirmIndividualSelection(individualCondition);
      closeIndividualSelectionDrawer();
    },
    onDelete: condition => {
      onRemoveCondition(condition as ConditionWithId);
    },
    disabled: false,
  });

  const {
    allSelectionDrawer,
    closeAllSelectionDrawer,
    showAllSelectionDrawer,
  } = useAllSelection({
    onConfirm: values => {
      const allCondition = values as SegmentationConditionAll;
      onAddAllCondition(allCondition);
      closeAllSelectionDrawer();
    },
    onDelete: condition => {
      onRemoveCondition(condition as ConditionWithId);
    },
    disabled: false,
  });

  const {
    getSegmentationSummaryCardProps,
    segmentationSelectionDrawer,
    confirmDeleteSegmentationSelectionModal,
    showSegmentationSelectionDrawer,
    closeSegmentationSelectionDrawer,
  } = useSegmentationSelection({
    onConfirm: condition => {
      const assignSegmentationConditionType =
        condition as AssignSegmentationConditionType;
      handleConfirmSegmentationSelection(assignSegmentationConditionType);
      closeSegmentationSelectionDrawer();
    },
    onDelete: condition => {
      onRemoveCondition(condition as ConditionWithId);
    },
    setEditingConditionId: setEditingSegmentationConditionId,
    disabled: false,
  });

  const handleOpenSegmentationSelectionDrawer = () => {
    setEditingSegmentationConditionId(null);
    showSegmentationSelectionDrawer({ disabled: false });
  };

  const handleOpenIndividualSelectionDrawer = () => {
    setEditingIndividualConditionId(null);
    showIndividualSelectionDrawer({});
  };

  return (
    <Stack sx={{ gap: 2, height: '100vh' }}>
      <HuTitle
        title={t('competencies:assignment')}
        description={t('audience:select_collaborators_to_assign')}
        variant="L"
      />
      {alreadyAssigned && (
        <Stack sx={{ gap: 2 }}>
          {formAudienceQuery.conditions.map((condition: ConditionWithId) => (
            <Fragment key={condition.id}>
              {isSegmentationCondition(condition) && (
                <SegmentationSummaryCard
                  condition={condition}
                  disabled={false}
                  {...getSegmentationSummaryCardProps(condition, false)}
                />
              )}
              {condition.type === SegmentationCondition.USERS && (
                <IndividualSelectionSummaryCard
                  userIds={condition.userIds ?? []}
                  disabled={false}
                  onDelete={() => {
                    onRemoveCondition(condition);
                  }}
                  onEdit={() => {
                    setEditingIndividualConditionId(condition.id);
                    showIndividualSelectionDrawer({
                      userIds: condition.userIds ?? [],
                      disabled: false,
                    });
                  }}
                />
              )}
              {condition.type === SegmentationCondition.ALL && (
                <AllSelectionSummaryCard
                  disabled={false}
                  onEdit={() => {
                    showAllSelectionDrawer({
                      disabled: false,
                    });
                  }}
                  onDelete={() => {
                    onRemoveCondition(condition);
                  }}
                />
              )}
            </Fragment>
          ))}
        </Stack>
      )}
      {showCriteriaSelectionDropdown && (
        <CriteriaSelectionDropdown
          assignments={formAudienceQuery.conditions}
          showIndividualSelectionDrawer={handleOpenIndividualSelectionDrawer}
          showSegmentationSelectionDrawer={
            handleOpenSegmentationSelectionDrawer
          }
          showAllSelectionDrawer={() => showAllSelectionDrawer({})}
        />
      )}
      {!alreadyAssigned && (
        <>
          <SelectionCriteriaCard
            onClick={handleOpenSegmentationSelectionDrawer}
            Icon={IconUsersGroup}
            title={t('audience:segmented_users_title')}
            description={t('audience:segmented_users_description')}
            label={t('audience:automatic_assignment')}
            sx={{ animationDelay: `${0 * 25}ms` }}
          />
          <SelectionCriteriaCard
            onClick={handleOpenIndividualSelectionDrawer}
            Icon={IconUsers}
            title={t('audience:individual_users_title')}
            description={t('audience:individual_users_description')}
            sx={{ animationDelay: `${1 * 25}ms` }}
          />
          <SelectionCriteriaCard
            onClick={() => showAllSelectionDrawer({})}
            Icon={IconBuildingSkyscraper}
            title={t('audience:all_users_title')}
            description={t('audience:all_users_description')}
            label={t('audience:automatic_assignment')}
            sx={{ animationDelay: `${2 * 25}ms` }}
          />
        </>
      )}
      {confirmDeleteSegmentationSelectionModal}
      {segmentationSelectionDrawer}
      {individualSelectionDrawer}
      {allSelectionDrawer}
    </Stack>
  );
};

export default AssignmentStepContent;