import * as React from 'react';
import { AttachmentList, FileDropzone, FormField } from '../ui';
import { IAttachmentEditor } from './useAttachmentEditor';
import { attachmentsOfCategory, attachmentsWithoutCategories, categoryPrefix } from './attachmentCategories';
import styles from './AttachmentSlotField.module.scss';

interface Props {
  /** Подпись поля — что за документ. */
  label: string;
  editor: IAttachmentEditor;
  /** Можно добавлять и удалять файлы (форма подачи / согласующий с полным правом). */
  editable: boolean;
  /** Группа новых файлов в editor.pending. */
  groupKey: string;
  /** Категория в имени файла (см. attachmentCategories); не задана — «прочие» вложения. */
  category?: string;
  /** Для «прочих» (category не задана): категории формы, файлы которых сюда НЕ попадают. */
  knownCategories?: string[];
  /** Звёздочка «обязательно» у подписи; саму проверку делает форма. */
  required?: boolean;
}

/**
 * Поле одного подписанного слота вложений: уже прикреплённые файлы + (в правке)
 * выбор новых. Новые файлы копятся в editor.pending[groupKey] и загружаются
 * формой при сохранении (editor.uploadPending), с префиксом категории в имени.
 */
export const AttachmentSlotField: React.FC<Props> = ({
  label,
  editor,
  editable,
  groupKey,
  category,
  knownCategories = [],
  required
}) => {
  const items = category
    ? attachmentsOfCategory(editor.items, category)
    : attachmentsWithoutCategories(editor.items, knownCategories);
  // В списке имена показаны без префикса категории — для удаления возвращаем его.
  const removeWithPrefix = (name: string): void => editor.remove(category ? categoryPrefix(category) + name : name);

  return (
    <FormField label={label} required={required} full>
      {items.length > 0 && <AttachmentList items={items} onRemove={editable ? removeWithPrefix : undefined} />}
      {items.length === 0 && !editable && <span className={styles.empty}>—</span>}
      {editable && (
        <FileDropzone files={editor.pending[groupKey] || []} onChange={(files) => editor.setPending(groupKey, files)} />
      )}
    </FormField>
  );
};