import {
  Heading01Icon,
  Heading02Icon,
  Heading03Icon,
  Heading04Icon,
  Heading05Icon,
  Heading06Icon,
} from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';

const HEADING_ICONS = {
  1: Heading01Icon,
  2: Heading02Icon,
  3: Heading03Icon,
  4: Heading04Icon,
  5: Heading05Icon,
  6: Heading06Icon,
};

const HEADING_STYLES = {
  1: 'text-3xl font-bold leading-tight text-neutral-900 dark:text-white',
  2: 'text-2xl font-bold leading-tight text-neutral-900 dark:text-white',
  3: 'text-xl font-semibold leading-snug text-neutral-900 dark:text-white',
  4: 'text-lg font-semibold leading-snug text-neutral-900 dark:text-white',
  5: 'text-base font-semibold leading-normal text-neutral-900 dark:text-white',
  6: 'text-sm font-semibold uppercase tracking-wide text-neutral-700 dark:text-neutral-300',
};

function makeHeading(level) {
  const Icon = HEADING_ICONS[level];
  return {
    type: `heading_${level}`,
    label: `Titre ${level}`,
    icon: <Icon width={18} height={18} />,
    keywords: [`titre ${level}`, `heading ${level}`, `h${level}`],
    isText: true,
    textTag: `h${level}`,
    textClassName: HEADING_STYLES[level],
    placeholder: `Titre ${level}`,
    shortcut: `${'#'.repeat(level)} `,
    create(init = {}) {
      return { id: newBlockId(), type: `heading_${level}`, content: [], ...init };
    },
  };
}

export const Heading1 = makeHeading(1);
export const Heading2 = makeHeading(2);
export const Heading3 = makeHeading(3);
export const Heading4 = makeHeading(4);
export const Heading5 = makeHeading(5);
export const Heading6 = makeHeading(6);

export default [Heading1, Heading2, Heading3, Heading4, Heading5, Heading6];
