import { useFormContext, useWatch } from 'react-hook-form';
import { useOutletContext } from 'react-router';

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

import Alert from '@material-hu/components/design-system/Alert';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import RadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import Title from '@material-hu/components/design-system/Title';

import { usersKeys } from 'src/pages/dashboard/Users/queries';
import { getPublicUsers } from 'src/services/usersService';
import { type PolicyOutletContext } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { FormApprovalStepsList } from 'src/components/ApprovalStepsList/form';
import { ApprovalWorkflow } from 'src/components/ApprovalStepsList/types';

import { mapUsersToApprovalStepUsers } from '../../Approvers/utils';
import { type PolicyFormFields, policiesFields } from '../../form';
import { validateStepsLength } from '../../utils';

const Approvers = () => {
  const { t } = useLokaliseTranslation(['time_tracker', 'approval_requests']);
  const { loadingPolicy = false } =
    useOutletContext<PolicyOutletContext>() || {};
  const parentForm = useFormContext<PolicyFormFields>();

  const [approvalWorkflow, approvalUsers] = useWatch({
    control: parentForm.control,
    name: [
      policiesFields.approval.approvalWorkflow,
      policiesFields.approval.approvalUsers,
    ],
  });

  const handleRemoveStep = (index: number) => {
    const newApprovalUsers = approvalUsers.filter((_, i) => i !== index);
    parentForm.setValue(
      policiesFields.approval.approvalUsers,
      newApprovalUsers,
    );
  };

  return (
    <Stack sx={{ gap: 1.5 }}>
      <Title
        variant="M"
        title={t('approval_requests:approval_workflow')}
        description={t('approval_requests:approval_workflow_description')}
      />
      <Skeleton
        isLoading={loadingPolicy}
        sx={{
          borderRadius: theme => theme.spacing(2),
          maxWidth: 'unset',
        }}
      >
        <CardContainer fullWidth>
          <RadioButton
            label={t('approval_requests:use_default_configuration')}
            description={t(
              'approval_requests:use_default_configuration_description',
            )}
            isActive={approvalWorkflow === ApprovalWorkflow.DEFAULT}
            onClick={() => {
              parentForm.setValue(
                policiesFields.approval.approvalWorkflow,
                ApprovalWorkflow.DEFAULT,
              );
            }}
          />
        </CardContainer>
      </Skeleton>
      <Skeleton
        isLoading={loadingPolicy}
        sx={{
          borderRadius: theme => theme.spacing(2),
          maxWidth: 'unset',
        }}
      >
        <CardContainer fullWidth>
          <RadioButton
            label={t('approval_requests:create_custom_workflow')}
            description={t(
              'approval_requests:create_custom_workflow_description',
            )}
            isActive={approvalWorkflow === ApprovalWorkflow.CUSTOM}
            onClick={() => {
              parentForm.setValue(
                policiesFields.approval.approvalWorkflow,
                ApprovalWorkflow.CUSTOM,
              );
            }}
          />
          {approvalWorkflow === ApprovalWorkflow.CUSTOM && (
            <>
              <Alert
                severity="info"
                title={t('approval_requests:default_workflow_will_be_ignored')}
                description={t(
                  'approval_requests:default_workflow_will_be_ignored_description',
                )}
                sx={{ my: 2 }}
                hasClose
              />
              <CardContainer
                color="grey"
                sx={{ border: 'none' }}
                fullWidth
              >
                <FormApprovalStepsList
                  name={policiesFields.approval.approvalUsers}
                  isLoadingSteps={loadingPolicy}
                  approvalStepDrawerProps={{
                    usersService: {
                      getUsers: getPublicUsers,
                      queryKey: usersParams =>
                        usersKeys.usersWithParams(usersParams),
                      getNextPageParam: lastPage =>
                        lastPage.data.page < lastPage.data.totalPages
                          ? lastPage.data.page
                          : undefined,
                    },
                    usersMapping: mapUsersToApprovalStepUsers,
                  }}
                  cardProps={{
                    menuProps: {
                      onRemoveStep: handleRemoveStep,
                    },
                  }}
                  rules={{ validate: value => validateStepsLength(value, t) }}
                />
              </CardContainer>
            </>
          )}
        </CardContainer>
      </Skeleton>
    </Stack>
  );
};

export default Approvers;