import {
  Button,
  ModalSize,
  VariantType,
  useToastProvider,
} from '@gouvfr-lasuite/cunningham-react';
import { t } from 'i18next';
import { useState } from 'react';

import { Box, Text } from '@/components';
import { Modal } from '@/components/Modal';
import { useCunninghamTheme } from '@/cunningham';

import { useUpdateTeam } from '../api';
import IconEdit from '../assets/icon-edit.svg';
import { Team } from '../types';

import { InputTeamName } from './InputTeamName';

interface ModalUpdateTeamProps {
  onClose: () => void;
  team: Team;
}

export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
  const { colorsTokens } = useCunninghamTheme();
  const [teamName, setTeamName] = useState(team.name);
  const { toast } = useToastProvider();

  const {
    mutate: updateTeam,
    isError,
    isPending,
    error,
  } = useUpdateTeam({
    onSuccess: () => {
      toast(t('The team has been updated.'), VariantType.SUCCESS, {
        duration: 4000,
      });
      onClose();
    },
  });

  return (
    <Modal
      isOpen
      closeOnClickOutside
      hideCloseButton
      leftActions={
        <Button
          aria-label={t('Close the modal')}
          color="neutral"
          variant="secondary"
          fullWidth
          onClick={() => onClose()}
        >
          {t('Cancel')}
        </Button>
      }
      onClose={() => onClose()}
      rightActions={
        <Button
          aria-label={t('Validate the modification')}
          color="brand"
          fullWidth
          onClick={() =>
            updateTeam({
              name: teamName,
              id: team.id,
            })
          }
        >
          {t('Validate the modification')}
        </Button>
      }
      size={ModalSize.MEDIUM}
      title={
        <Box $align="center" $gap="1rem">
          <IconEdit
            width={48}
            color={colorsTokens()['brand-600']}
            aria-hidden="true"
          />
          <Text $size="h3" $margin="none">
            {t('Update team {{teamName}}', { teamName: team.name })}
          </Text>
        </Box>
      }
    >
      <Box
        $margin={{ bottom: 'xl' }}
        aria-label={t('Content modal to update the team')}
      >
        <Text as="p" $margin={{ bottom: 'big' }}>
          {t('Enter the new name of the selected team')}
        </Text>

        <InputTeamName
          label={t('New name...')}
          defaultValue={team.name}
          {...{ error, isError, isPending, setTeamName }}
        />
      </Box>
    </Modal>
  );
};
