import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import {
  IconCircleNumber1,
  IconCircleNumber2,
  IconCircleNumber3,
  IconPlus,
} from '@material-hu/icons/tabler';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import HuAlert from '@material-hu/components/design-system/Alert';
import Button from '@material-hu/components/design-system/Buttons/Button';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

import { type ApprovalUsersInfo } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ApproversSkeleton from '../../Approvers/components/ApproversSkeleton';
import ApprovalStepCards from '../ApprovalStepCards';
import { useApprovalStepDrawer } from '../useApprovalStepDrawer';

const MAX_APPROVAL_STEPS = 3;

export const STEP_ICONS = [
  IconCircleNumber1,
  IconCircleNumber2,
  IconCircleNumber3,
];

type ApprovalStepsListProps = {
  approvalUsers: ApprovalUsersInfo[];
  setApprovalUsers: (value: ApprovalUsersInfo[]) => void;
  isLoading?: boolean;
  error?: string;
  drawerProps?: {
    onSave?: () => void;
  };
  cardProps?: {
    menuProps?: {
      onRemoveStep?: (index: number) => void;
    };
  };
};

const ApprovalStepsList = ({
  approvalUsers,
  setApprovalUsers,
  error,
  drawerProps,
  cardProps,
  isLoading,
}: ApprovalStepsListProps) => {
  const { t } = useLokaliseTranslation('approval_requests');

  const { drawer, showDrawer } = useDrawerV2(args =>
    useApprovalStepDrawer({
      ...args,
      setApprovalUsers,
      approvalUsers,
      drawerProps,
    }),
  );

  const enabledSteps = approvalUsers.filter(step => step.enabledStep);

  const nextAvailableStepIndex = approvalUsers.findIndex(
    step => !step.enabledStep,
  );

  const handleAddStep = () => {
    if (
      nextAvailableStepIndex !== -1 &&
      nextAvailableStepIndex < MAX_APPROVAL_STEPS
    ) {
      showDrawer({ stepIndex: nextAvailableStepIndex });
    }
  };

  const handleRemoveStep = (index: number) => {
    const updatedUsers = approvalUsers.map((step, i) =>
      i === index
        ? {
            enabledStep: false,
            users: [],
            itemIds: [],
            boss: false,
            secondBoss: false,
            designatedReviewer: false,
          }
        : step,
    );

    setApprovalUsers(updatedUsers);
    cardProps?.menuProps?.onRemoveStep?.(index);
  };

  const handleEditStep = (index: number) => {
    showDrawer({ stepIndex: index });
  };

  const canAddMoreSteps = enabledSteps.length < MAX_APPROVAL_STEPS;

  return (
    <Stack sx={{ gap: 2 }}>
      {drawer}
      <HuTitle
        variant="M"
        title={t('step_configuration.approval_steps')}
        description={t('step_configuration.approval_steps_description')}
      />
      <CardContainer fullWidth>
        <Stack sx={{ gap: 2 }}>
          {!isLoading && (
            <>
              <ApprovalStepCards
                approvalUsers={approvalUsers}
                cardProps={{
                  menuProps: {
                    handleRemoveStep,
                    handleEditStep,
                  },
                }}
              />
              {canAddMoreSteps && (
                <>
                  <Divider />
                  <Button
                    variant="secondary"
                    size="large"
                    sx={{ width: '100%' }}
                    onClick={handleAddStep}
                    startIcon={<IconPlus />}
                  >
                    {t('step_configuration.add_approval_step')}
                  </Button>
                </>
              )}
            </>
          )}
          {isLoading && <ApproversSkeleton />}

          {error && (
            <HuAlert
              severity="error"
              title={error}
            />
          )}
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default ApprovalStepsList;