/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
 */
import { registerBlockType, createBlock } from "@wordpress/blocks";
import { useEffect } from "@wordpress/element";
import { useDispatch, useSelect } from "@wordpress/data";
import { InnerBlocks, useBlockProps } from "@wordpress/block-editor";
import deprecated from "./deprecated";

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor. All other files
 * get applied to the editor only.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
// import "./editor.scss";

/**
 * Internal dependencies
 */
// import Edit from "./edit";
// import Save from "./save";
// import metadata from "./block.json";

function AccordionMigrationEdit({attributes, clientId}) {
  const {replaceBlock} = useDispatch( 'core/block-editor' );
  const innerBlocks = useSelect(
    (select) => select('core/block-editor').getBlocks(clientId),
    [clientId]
  );
  useEffect(() => {
    if ( ! innerBlocks ) return;
    const {isMultiOpen} = attributes;

    // Prefer the heading level from the first item; fall back to core's default
    const headingLevel =
      innerBlocks[ 0 ]?.attributes?.accordionHeadingLevel ?? 3;

    // Transform each ucla accordion-item into the core 3-block structure:
    // core/accordion-item
    //   ├── core/accordion-heading  (accordionHeading → title, level)
    //   └── core/accordion-panel   (old innerBlocks preserved)
    const migratedItems = innerBlocks.map( ( item ) => {
      const {
        accordionHeading = '',
        accordionHeadingLevel = 4,
      } = item.attributes;

      return createBlock(
        'core/accordion-item',
        {openByDefault: false},
        [
          createBlock('core/accordion-heading', {
            title: accordionHeading,
            level: accordionHeadingLevel,
          }),
          createBlock(
            'core/accordion-panel',
            {},
            item.innerBlocks
          ),
        ]
      )
    });
    const newBlock = createBlock(
      'core/accordion',
      {
        autoclose: ! isMultiOpen,
        headingLevel,
      },
      migratedItems
    );
    replaceBlock(clientId, newBlock)
  }, [] ); // eslint-disable-line react-hooks/exhaustive-deps
  return <div {...useBlockProps()} aria-hidden />
}

registerBlockType('ucla-wordpress-plugin/accordion', {
  title: 'Accordion (Deprecated)',
  category: 'ucla-design-system-components',
  supports: {
    inserter: false,
    html: false
  },
  attributes: {
    isMultiOpen: {
      type: 'boolean',
      default: false,
    }
  },
  edit: AccordionMigrationEdit,
  save() {
    return null;
  },
  deprecated,
});
