import * as React from 'react';
import styles from './ApproverNote.module.scss';
import { CollapseSection, FormField, TextArea, Toggle, useFormReadOnly } from '../ui';
import { APPROVER_NOTE_TEXT } from './approverNoteTexts';

/** Примечание: текст + признак «Важное». */
export interface IApproverNote {
  text: string;
  important: boolean;
}

/** Ключи полей формы (= internalName колонок) — для подсветки правок и прокрутки к полю. */
export interface IApproverNoteFieldKeys {
  text: string;
  important: string;
}

interface Props {
  /** Заголовок раздела с номером по порядку формы, напр. «6. Примечание для согласующих». */
  title: string;
  value: IApproverNote;
  onChange: (value: IApproverNote) => void;
  fieldKeys: IApproverNoteFieldKeys;
}

/**
 * Раздел «Примечание для согласующих» — общий для форм. Сама форма решает, в
 * какие колонки писать (fieldKeys) и где показывать плашку ApproverNoteBanner.
 * В режиме чтения (FormModeProvider readOnly) поля только показываются.
 */
export const ApproverNoteSection: React.FC<Props> = ({ title, value, onChange, fieldKeys }) => {
  const readOnly = useFormReadOnly();

  return (
    <CollapseSection title={title} icon="info">
      <FormField label={APPROVER_NOTE_TEXT.fieldLabel} htmlFor={fieldKeys.text} full>
        <TextArea
          id={fieldKeys.text}
          value={value.text}
          onChange={(text) => onChange({ ...value, text })}
          placeholder={APPROVER_NOTE_TEXT.placeholder}
        />
        {!readOnly && <div className={styles.hint}>{APPROVER_NOTE_TEXT.fieldHint}</div>}
      </FormField>
      <FormField label={APPROVER_NOTE_TEXT.importantLabel} fieldKey={fieldKeys.important}>
        <Toggle
          checked={value.important}
          onChange={(important) => onChange({ ...value, important })}
          onLabel={APPROVER_NOTE_TEXT.importantOn}
        />
      </FormField>
    </CollapseSection>
  );
};