/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from "@wordpress/blocks";
import { __ } from "@wordpress/i18n";

import classnames from "classnames";

/**
 * WordPress dependencies
 */
import {
  InnerBlocks,
  BlockControls,
  BlockVerticalAlignmentToolbar,
  InspectorControls,
  useBlockProps,
  useSetting,
  useInnerBlocksProps,
  store as blockEditorStore,
} from "@wordpress/block-editor";

import { useSelect, useDispatch } from "@wordpress/data";

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import "./editor.scss";

const icon = wp.element.createElement(
  "svg",
  {
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    className: "kelsey-pro-icon",
  },
  wp.element.createElement("path", {
    d: "M16.6666667,14.2142857 L16.6666667,14.7857143 C16.6666667,15.7325 15.9204861,16.5 15,16.5 L1.66666667,16.5 C0.746180556,16.5 0,15.7325 0,14.7857143 L0,5.64285714 C0,4.69607143 0.746180556,3.92857143 1.66666667,3.92857143 L2.22222222,3.92857143 L2.22222222,5.64285714 L1.875,5.64285714 C1.75994068,5.64285714 1.66666667,5.73879613 1.66666667,5.85714286 L1.66666667,14.5714286 C1.66666667,14.6897753 1.75994068,14.7857143 1.875,14.7857143 L14.7916667,14.7857143 C14.906726,14.7857143 15,14.6897753 15,14.5714286 L15,14.2142857 L16.6666667,14.2142857 Z M18.125,2.21428571 L5.20833333,2.21428571 C5.09327401,2.21428571 5,2.3102247 5,2.42857143 L5,11.1428571 C5,11.2612039 5.09327401,11.3571429 5.20833333,11.3571429 L18.125,11.3571429 C18.2400593,11.3571429 18.3333333,11.2612039 18.3333333,11.1428571 L18.3333333,2.42857143 C18.3333333,2.3102247 18.2400593,2.21428571 18.125,2.21428571 Z M18.3333333,0.5 C19.2538194,0.5 20,1.2675 20,2.21428571 L20,11.3571429 C20,12.3039286 19.2538194,13.0714286 18.3333333,13.0714286 L5,13.0714286 C4.07951389,13.0714286 3.33333333,12.3039286 3.33333333,11.3571429 L3.33333333,2.21428571 C3.33333333,1.2675 4.07951389,0.5 5,0.5 L18.3333333,0.5 Z M9.16666667,4.5 C9.16666667,5.28896429 8.54482639,5.92857143 7.77777778,5.92857143 C7.01072917,5.92857143 6.38888889,5.28896429 6.38888889,4.5 C6.38888889,3.71103571 7.01072917,3.07142857 7.77777778,3.07142857 C8.54482639,3.07142857 9.16666667,3.71103571 9.16666667,4.5 Z M6.66666667,7.92857143 L8.03871528,6.51732143 C8.20142361,6.34996429 8.46524306,6.34996429 8.62798611,6.51732143 L10,7.92857143 L13.5942708,4.23160714 C13.7569792,4.06425 14.0207986,4.06425 14.1835417,4.23160714 L16.6666667,6.78571429 L16.6666667,9.64285714 L6.66666667,9.64285714 L6.66666667,7.92857143 Z",
  })
);

/**
 * 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.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
//  import './style.scss';

/**
 * Internal dependencies
 */
//  import Edit from './edit';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType("kelsey-pro/slides", {
  title: "Slides",
  icon,
  edit: ({
    attributes: {
      verticalAlignment,
      width,
      templateLock = false,
      allowedBlocks,
    },
    setAttributes,
    clientId,
  }) => {
    const TEMPLATE = [["core/image"]]; // Use double brackets to create a nested structure

    const classes = classnames("swiper-slide", {});

    const blockProps = useBlockProps({
      className: classes,
      // style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
    });

    const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
      (select) => {
        const { getBlockOrder, getBlockRootClientId } =
          select(blockEditorStore);

        const rootId = getBlockRootClientId(clientId);

        return {
          hasChildBlocks: getBlockOrder(clientId).length > 0,
          rootClientId: rootId,
          columnsIds: getBlockOrder(rootId),
        };
      },
      [clientId]
    );

    const { updateBlockAttributes } = useDispatch(blockEditorStore);

    const innerBlocksProps = useInnerBlocksProps(
      { ...blockProps },
      {
        templateLock,
        template: TEMPLATE,
        allowedBlocks,
        renderAppender: hasChildBlocks
          ? undefined
          : InnerBlocks.ButtonBlockAppender,
      }
    );
    return <div {...innerBlocksProps} />;
  },

  save: ({ attributes }) => {
    const blockProps = useBlockProps.save({
      // className: wrapperClasses,
      // style,
    });
    const innerBlocksProps = useInnerBlocksProps.save(blockProps);

    return <div {...innerBlocksProps} />;
  },
});
