const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { PanelBody, ColorPicker } = wp.components;
const { InspectorControls, useBlockProps, InnerBlocks } =
  wp.blockEditor || wp.editor;

import "./style.css";

// Parent Tabs block
registerBlockType("ai-builder/aibui-tabs", {
  title: __("Tabs (AI Builder)", "ai-builder"),
  icon: "index-card",
  category: "widgets",
  supports: { align: ["wide", "full"], html: false },
  attributes: {
    activeColor: { type: "string", default: "#4f46e5" },
  },
  edit: (props) => {
    const { attributes, setAttributes } = props;
    const { activeColor } = attributes;

    function hexToRgba(hex, alpha) {
      const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
        hex || "#4f46e5"
      );
      if (!match) return `rgba(79,70,229,${alpha})`;
      const r = parseInt(match[1], 16);
      const g = parseInt(match[2], 16);
      const b = parseInt(match[3], 16);
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }

    const blockProps = useBlockProps({
      className: "aibui-tabs",
      style: {
        "--aibui-active": activeColor,
        "--aibui-active-shadow": hexToRgba(activeColor, 0.15),
      },
    });
    const TEMPLATE = [
      ["ai-builder/aibui-tab", { title: "Tab 1" }],
      ["ai-builder/aibui-tab", { title: "Tab 2" }],
    ];
    return (
      <>
        <InspectorControls>
          <PanelBody
            title={__("Tabs Settings", "ai-builder")}
            initialOpen={true}
          >
            <div style={{ padding: 12 }}>
              <p style={{ margin: "0 0 8px" }}>
                {__("Active tab color", "ai-builder")}
              </p>
              <ColorPicker
                color={activeColor}
                onChangeComplete={(value) => {
                  const next =
                    value?.hex || value?.rgb ? value.hex || activeColor : value;
                  setAttributes({ activeColor: next || "#4f46e5" });
                }}
                onChange={(value) => {
                  const next =
                    value?.hex || value?.rgb ? value.hex || activeColor : value;
                  setAttributes({ activeColor: next || "#4f46e5" });
                }}
                disableAlpha
              />
            </div>
          </PanelBody>
        </InspectorControls>
        <div {...blockProps}>
          <InnerBlocks
            allowedBlocks={["ai-builder/aibui-tab"]}
            template={TEMPLATE}
            templateLock={false}
          />
        </div>
      </>
    );
  },
  save: (props) => {
    const { attributes } = props;
    const { activeColor } = attributes;
    function hexToRgba(hex, alpha) {
      const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
        hex || "#4f46e5"
      );
      if (!match) return `rgba(79,70,229,${alpha})`;
      const r = parseInt(match[1], 16);
      const g = parseInt(match[2], 16);
      const b = parseInt(match[3], 16);
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
    const blockProps = wp.blockEditor
      ? wp.blockEditor.useBlockProps.save({
          className: "aibui-tabs",
          style: {
            "--aibui-active": activeColor || "#4f46e5",
            "--aibui-active-shadow": hexToRgba(activeColor, 0.15),
          },
        })
      : {};
    return (
      <div {...blockProps}>
        <InnerBlocks.Content />
      </div>
    );
  },
});

// Child Tab block
registerBlockType("ai-builder/aibui-tab", {
  title: __("Tab", "ai-builder"),
  parent: ["ai-builder/aibui-tabs"],
  icon: "index-card",
  category: "widgets",
  supports: { reusable: false, html: false },
  attributes: {
    title: { type: "string", default: "Tab" },
  },
  edit: (props) => {
    const { attributes, setAttributes } = props;
    const { title } = attributes;
    const blockProps = useBlockProps({ className: "aibui-tab" });
    return (
      <div {...blockProps}>
        <input
          className="aibui-tab-title-input"
          value={title}
          onChange={(e) => setAttributes({ title: e.target.value })}
        />
        <div className="aibui-tab-inner">
          <InnerBlocks />
        </div>
      </div>
    );
  },
  save: (props) => {
    const { attributes } = props;
    const { title } = attributes;
    const blockProps = wp.blockEditor
      ? wp.blockEditor.useBlockProps.save({ className: "aibui-tab" })
      : {};
    return (
      <div {...blockProps}>
        <div className="aibui-tab-panel" data-title={title}>
          <InnerBlocks.Content />
        </div>
      </div>
    );
  },
});