import { type FC, type MouseEvent } from 'react';
import { useFormContext } from 'react-hook-form';

import { IconEdit, IconTrash } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { type SxProps, type Theme, useTheme } from '@material-hu/mui/styles';

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

import { CREATING_ENTRY_ID } from 'src/pages/dashboard/timeTracking/constants';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  editingTimeSlot: string | null;
  entryId: string;
  handleEditInit: (id: string | undefined) => void;
  isLoading: boolean;
  showDeleteModal: () => void;
  onEntryDeletion: () => void;
  isDeactivated?: boolean;
};

const actionContainerSx: SxProps<Theme> = {
  backgroundColor: ({ palette }) => palette.new.background.layout.default,
  borderTop: ({ palette }) => `1px solid ${palette.new.border.neutral.default}`,
  borderBottomLeftRadius: ({ spacing }) => spacing(1),
  borderBottomRightRadius: ({ spacing }) => spacing(1),
  py: 1,
};

const buttonSx = {
  fontSize: 14,
  width: 'fit-content',
};

const EntryAction: FC<Props> = props => {
  const {
    editingTimeSlot,
    entryId,
    handleEditInit,
    isLoading,
    onEntryDeletion,
    showDeleteModal,
    isDeactivated,
  } = props;
  const { t } = useLokaliseTranslation(['time_tracker', 'general']);
  const { palette } = useTheme();
  const {
    formState: { isDirty },
    reset,
  } = useFormContext();

  const handleDeleteEntry = (event: MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    if (editingTimeSlot === CREATING_ENTRY_ID) {
      onEntryDeletion();
      reset();
    } else {
      showDeleteModal();
    }
  };

  const entryBeingCreated = editingTimeSlot === CREATING_ENTRY_ID;

  if (!editingTimeSlot) {
    return (
      <Stack
        sx={{
          ...actionContainerSx,
          alignItems: 'center',
        }}
      >
        <Button
          variant="tertiary"
          size="small"
          disabled={isDeactivated}
          endIcon={
            <IconEdit
              size={16}
              color={palette.new.action.button.text.tertiary.default}
            />
          }
          onClick={e => {
            e.preventDefault();
            handleEditInit(entryId);
          }}
          sx={buttonSx}
        >
          {t('edit_register')}
        </Button>
      </Stack>
    );
  }

  return (
    <Stack
      sx={{
        ...actionContainerSx,
        flexDirection: 'row',
        gap: 1,
        justifyContent: 'center',
        px: 2,
      }}
    >
      <Button
        startIcon={entryBeingCreated ? undefined : <IconTrash size={16} />}
        onClick={handleDeleteEntry}
        disabled={isLoading}
        sx={{
          fontSize: 14,
          width: '100%',
        }}
        disableRipple
      >
        {t(entryBeingCreated ? 'general:cancel' : 'delete_register')}
      </Button>
      <Button
        variant="primary"
        type="submit"
        disabled={!isDirty}
        loading={isLoading}
        sx={{
          fontSize: 14,
          width: '100%',
        }}
      >
        {t(entryBeingCreated ? 'create_register' : 'modify_register')}
      </Button>
    </Stack>
  );
};

export default EntryAction;
