import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { registerBlockType, type BlockEditProps } from '@wordpress/blocks';
import { PanelBody, RangeControl, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useMemo } from 'react';

import { headingsKey, readHeadings, type EditorBlock } from './headings';

const NAME = 'recomaze/toc';

type Attributes = {
  title: string;
  maxLevel: number;
};

/**
 * The list as the reader will see it, built from the editor's own blocks
 * so it follows unsaved headings; the page itself is rendered server side.
 */
const Edit = ({
  attributes,
  setAttributes,
}: BlockEditProps<Attributes>): JSX.Element => {
  const key = useSelect(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (select: any): string =>
      headingsKey(select('core/block-editor').getBlocks() as EditorBlock[]),
    []
  );
  const headings = useMemo(
    () => readHeadings(key, attributes.maxLevel),
    [key, attributes.maxLevel]
  );

  return (
    <>
      <InspectorControls>
        <PanelBody title="Table of contents">
          <TextControl
            label="Title"
            value={attributes.title}
            onChange={title => setAttributes({ title })}
            help="Empty for no title above the list."
            __nextHasNoMarginBottom
            __next40pxDefaultSize
          />
          <RangeControl
            label="Deepest heading level"
            min={2}
            max={6}
            value={attributes.maxLevel}
            onChange={value => setAttributes({ maxLevel: Number(value) || 3 })}
            help="H2 headings always appear; raise it to list H3, H4 and deeper too."
            __nextHasNoMarginBottom
            __next40pxDefaultSize
          />
        </PanelBody>
      </InspectorControls>
      <nav {...useBlockProps({ className: 'recomaze-toc' })}>
        {attributes.title.trim() !== '' && (
          <p className="recomaze-toc__title">{attributes.title}</p>
        )}
        {headings.length === 0 ? (
          <p className="recomaze-toc__empty">
            The table of contents fills in as you add headings to the post.
          </p>
        ) : (
          <ol className="recomaze-toc__list">
            {headings.map((heading, index) => (
              <li
                key={index}
                className={`recomaze-toc__item recomaze-toc__item--level-${heading.level}`}
              >
                <a href="#" onClick={event => event.preventDefault()}>
                  {heading.text}
                </a>
              </li>
            ))}
          </ol>
        )}
      </nav>
    </>
  );
};

registerBlockType<Attributes>(
  {
    name: NAME,
    title: 'Table of contents',
    category: 'text',
    attributes: {
      title: { type: 'string', default: 'Table of contents' },
      maxLevel: { type: 'number', default: 3 },
    },
  },
  { edit: Edit, save: () => null }
);