import { type FunctionComponent, type SVGProps } from 'react';

import { type TablerIcon } from '@material-hu/icons/tabler';

import { type FileCardType } from '@material-hu/components/design-system/FileCard/types';

import {
  type LearningCertificateAlignment,
  type LearningCertificateColor,
  type LearningCertificateType,
} from '../types';

/** i18n slug used to build translation keys for each template. */
export type CertificateTemplateSlug = 'classic' | 'modern' | 'custom';

export type CertificateStepId =
  | 'template'
  | 'basic_information'
  | 'design'
  | 'revision';

export type CertificateFunnel = 'creation';

export type CertificateTemplateOption = {
  /** Backend certificate type stored in the form. */
  type: LearningCertificateType;
  /** Slug used to resolve i18n keys (labels, descriptions, preview alt). */
  slug: CertificateTemplateSlug;
  /** Inline SVG thumbnail. */
  Image: FunctionComponent<SVGProps<SVGSVGElement>>;
};

export type AlignmentOption = {
  value: LearningCertificateAlignment;
  Icon: TablerIcon;
  label: string;
};

/** A signature design slot. Maps to a `signatures[]` entry on PATCH. */
export type SignatureSlot = {
  id: string;
  file: FileCardType[];
  signerName: string;
  signerTitle: string;
};

/** A logo design slot. Contributes only its `fileAssetId` to the payload. */
export type LogoSlot = {
  id: string;
  file: FileCardType[];
};

export type CertificateCreateFormValues = {
  type: LearningCertificateType;
  name: string;
  title: string;
  subtitle: string;
  description: string;
  color: LearningCertificateColor;
  alignment: LearningCertificateAlignment;
  certificateSignaturesEnabled: boolean;
  certificateLogosEnabled: boolean;
  signatureSlots: SignatureSlot[];
  logoSlots: LogoSlot[];
  certificateCustomBackgroundFile: FileCardType[];
};
