import { ActionIcon, Button, Group, Tooltip } from '@mantine/core';
import {
  IconDeviceFloppy,
  IconEye,
  IconRosetteDiscountCheck,
  IconTrash,
} from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';

interface Props {
  hasSource: boolean;
  hasSelection: boolean;
  isPublished: boolean;
  dirty: boolean;
  canEdit: boolean;
  canPublish: boolean;
  saving: boolean;
  publishing: boolean;
  onPreview: () => void;
  onSave: () => void;
  onPublish: () => void;
  onArchive: () => void;
  onDelete: () => void;
}

/** Preview, save, publish, withdraw and delete for the selected version. */
export function TemplateActionBar({
  hasSource,
  hasSelection,
  isPublished,
  dirty,
  canEdit,
  canPublish,
  saving,
  publishing,
  onPreview,
  onSave,
  onPublish,
  onArchive,
  onDelete,
}: Props) {
  const { t } = useTranslation();

  const publishHint = !canPublish
    ? t('designer.noPublishPermission', 'You cannot publish designs')
    : dirty
      ? t('designer.saveFirst', 'Save your changes first')
      : t('designer.publishHint', 'Makes this the live certificate design');

  return (
    <Group>
      <Button
        variant="light"
        leftSection={<IconEye size={16} />}
        onClick={onPreview}
        disabled={!hasSource}
      >
        {t('designer.preview', 'Preview PDF')}
      </Button>
      <Button
        leftSection={<IconDeviceFloppy size={16} />}
        loading={saving}
        disabled={!canEdit || isPublished || !dirty}
        onClick={onSave}
      >
        {t('designer.save', 'Save draft')}
      </Button>
      <Tooltip label={publishHint}>
        <span>
          <Button
            color="teal"
            leftSection={<IconRosetteDiscountCheck size={16} />}
            loading={publishing}
            disabled={!canPublish || isPublished || dirty || !hasSelection}
            onClick={onPublish}
          >
            {t('designer.publish', 'Publish')}
          </Button>
        </span>
      </Tooltip>
      <div style={{ flex: 1 }} />
      {hasSelection && isPublished && canPublish && (
        <Button variant="subtle" color="orange" onClick={onArchive}>
          {t('designer.archive', 'Withdraw')}
        </Button>
      )}
      {hasSelection && !isPublished && canEdit && (
        <Tooltip label={t('designer.delete', 'Delete draft')}>
          <ActionIcon
            variant="subtle"
            color="red"
            aria-label={t('designer.delete', 'Delete draft')}
            onClick={onDelete}
          >
            <IconTrash size={16} />
          </ActionIcon>
        </Tooltip>
      )}
    </Group>
  );
}
