import { useTranslation } from 'react-i18next';

import Tooltip from '@design-system/Tooltip';
import { LoadingButton } from '@mui/lab';
import { Button, Stack } from '@mui/material';
import { IconInfoCircle } from '@tabler/icons-react';

import { type CoverPictureActionsProps } from '../types';

const CoverPictureActions = ({
  onDelete = () => null,
  onReposition = () => null,
  onChange = () => null,
  inputProps = {},
  loadingReposition = false,
  disabled = false,
  isEdit = false,
  recommendedSizeTooltip,
}: CoverPictureActionsProps) => {
  const { t } = useTranslation('material_hu_only');

  return (
    <Stack
      className="HuCoverPictureUploader-actions"
      sx={{ gap: 0.5, flexDirection: 'row', alignItems: 'center' }}
    >
      {!isEdit && (
        <Button
          variant="tertiary"
          onClick={onChange}
          disabled={disabled}
        >
          <input {...inputProps} />
          {t('cover_picture_uploader.cover_picture_change')}
        </Button>
      )}
      {isEdit && (
        <>
          <Button
            variant="tertiary"
            onClick={onDelete}
            disabled={disabled}
          >
            {t('cover_picture_uploader.cover_picture_delete')}
          </Button>
          <LoadingButton
            variant="tertiary"
            onClick={onReposition}
            loading={loadingReposition}
            disabled={disabled}
          >
            {t('cover_picture_uploader.cover_picture_reposition')}
          </LoadingButton>
        </>
      )}
      {recommendedSizeTooltip && (
        <Tooltip
          description={t('cover_picture_uploader.cover_picture_tooltip', {
            format: recommendedSizeTooltip.format.join(' - '),
            size: recommendedSizeTooltip.size,
          })}
          direction="bottom"
        >
          <IconInfoCircle size={16} />
        </Tooltip>
      )}
    </Stack>
  );
};

export default CoverPictureActions;
