(function (wp) {
  const { registerBlockType } = wp.blocks;
  const { InspectorControls, PanelColorSettings, useBlockProps } = wp.blockEditor;
  const { PanelBody, TextControl, SelectControl, ToggleControl } = wp.components;

  const iconOptions = [
    { label: "Cart", value: "cart" },
    { label: "Box", value: "box" },
    { label: "Chat", value: "chat" },
    { label: "Lines", value: "lines" },
    { label: "Truck", value: "truck" },
    { label: "Bag", value: "bag" },
    { label: "Globe", value: "globe" },
    { label: "Clock", value: "clock" },
    { label: "Shield", value: "shield" },
    { label: "Check", value: "check" },
    { label: "Star", value: "star" },
    { label: "Leaf", value: "leaf" },
    { label: "Heart", value: "heart" },
    { label: "Phone", value: "phone" },
    { label: "Tag", value: "tag" },
    { label: "Gift", value: "gift" },
    { label: "Lock", value: "lock" },
    { label: "Recycle", value: "recycle" },
    { label: "Warranty", value: "warranty" },
    { label: "Credit card", value: "creditcard" },
  ];

  const StepPanel = (index, attributes, setAttributes) => {
    const textKey = `step${index}Text`;
    const iconKey = `step${index}Icon`;
    const iconEnabledKey = `step${index}IconEnabled`;
    const urlKey = `step${index}Url`;
    const bgKey = `step${index}BgColor`;
    const textColorKey = `step${index}TextColor`;
    const iconColorKey = `step${index}IconColor`;

    return wp.element.createElement(
      wp.element.Fragment,
      { key: `step-panel-${index}` },
      wp.element.createElement(
        PanelBody,
        { title: `Paso ${index}`, initialOpen: index === 1 },
        wp.element.createElement(TextControl, {
          label: "Texto",
          value: attributes[textKey],
          onChange: (value) => setAttributes({ [textKey]: value }),
        }),
        wp.element.createElement(ToggleControl, {
          label: "Mostrar icono",
          checked: attributes[iconEnabledKey] !== false,
          onChange: (value) => setAttributes({ [iconEnabledKey]: value }),
        }),
        wp.element.createElement(SelectControl, {
          label: "Icono",
          value: attributes[iconKey],
          options: iconOptions,
          onChange: (value) => setAttributes({ [iconKey]: value }),
          disabled: attributes[iconEnabledKey] === false,
        }),
        wp.element.createElement(TextControl, {
          label: "Link URL",
          value: attributes[urlKey],
          onChange: (value) => setAttributes({ [urlKey]: value }),
          placeholder: "https://",
        })
      ),
      wp.element.createElement(PanelColorSettings, {
        title: `Colores paso ${index}`,
        colorSettings: [
          {
            label: "Fondo",
            value: attributes[bgKey],
            onChange: (value) => setAttributes({ [bgKey]: value }),
          },
          {
            label: "Texto",
            value: attributes[textColorKey],
            onChange: (value) => setAttributes({ [textColorKey]: value }),
          },
          {
            label: "Icono",
            value: attributes[iconColorKey],
            onChange: (value) => setAttributes({ [iconColorKey]: value }),
          },
        ],
      })
    );
  };

  registerBlockType("fjord/steps-six", {
    edit: (props) => {
      const { attributes, setAttributes } = props;
      const blockProps = useBlockProps({ className: "fjord-steps" });

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          [1, 2, 3, 4, 5, 6].map((index) => StepPanel(index, attributes, setAttributes))
        ),
        wp.element.createElement(
          "div",
          blockProps,
          wp.element.createElement(
            "div",
            {
              style: {
                border: "1px dashed rgba(14,16,17,0.25)",
                borderRadius: "12px",
                padding: "24px",
                textAlign: "center",
                color: "rgba(14,16,17,0.6)",
                fontSize: "13px",
              },
            },
            "Nordie 6 barras renders on the front-end."
          )
        )
      );
    },
    save: () => null,
  });
})(window.wp);
