import { __ } from "@wordpress/i18n";
import { PanelBody, ToggleControl, RangeControl, SelectControl } from "@wordpress/components";
import FontColorSetting from "../font/FontColorSetting";

const IconFrameSetting = ({ attributes, setAttributes, title, initialOpen = false, panelState, onTogglePanel, panelStates, togglePanel }) => {
  return (
    <PanelBody title={title || __("Icon Frame", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel}>
      <PanelBody title={__("Size", "zenblocks")} initialOpen={panelStates.iconFrameSize} onToggle={() => togglePanel("iconFrameSize")} className="zenblocks-nested-panel">
        <ToggleControl
          label={__("Set Width and Height Individually", "zenblocks")}
          checked={attributes.iconFrameUseIndividualSize || false}
          onChange={(value) => setAttributes({ iconFrameUseIndividualSize: value })}
        />
        {!attributes.iconFrameUseIndividualSize && (
          <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
            <div style={{ flex: 1 }}>
              <RangeControl value={attributes.iconFrameSize || 0} onChange={(value) => setAttributes({ iconFrameSize: value })} min={0} max={999} step={1} />
            </div>
            <div style={{ minWidth: "40px" }}>
              <SelectControl
                value={attributes.iconFrameSizeUnit || "px"}
                options={[
                  { label: "px", value: "px" },
                  { label: "%", value: "%" },
                  { label: "em", value: "em" },
                  { label: "rem", value: "rem" },
                ]}
                onChange={(unit) => setAttributes({ iconFrameSizeUnit: unit })}
              />
            </div>
          </div>
        )}
        {attributes.iconFrameUseIndividualSize && (
          <>
            <div style={{ marginTop: "12px" }}>
              <label style={{ display: "block", marginBottom: "4px", fontSize: "12px" }}>{__("Width", "zenblocks")}</label>
              <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
                <div style={{ flex: 1 }}>
                  <RangeControl value={attributes.iconFrameWidth || 0} onChange={(value) => setAttributes({ iconFrameWidth: value })} min={0} max={999} step={1} />
                </div>
                <div style={{ minWidth: "40px" }}>
                  <SelectControl
                    value={attributes.iconFrameWidthUnit || "px"}
                    options={[
                      { label: "px", value: "px" },
                      { label: "%", value: "%" },
                      { label: "em", value: "em" },
                      { label: "rem", value: "rem" },
                    ]}
                    onChange={(unit) => setAttributes({ iconFrameWidthUnit: unit })}
                  />
                </div>
              </div>
            </div>
            <div style={{ marginTop: "12px" }}>
              <label style={{ display: "block", marginBottom: "4px", fontSize: "12px" }}>{__("Height", "zenblocks")}</label>
              <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
                <div style={{ flex: 1 }}>
                  <RangeControl value={attributes.iconFrameHeight || 0} onChange={(value) => setAttributes({ iconFrameHeight: value })} min={0} max={999} step={1} />
                </div>
                <div style={{ minWidth: "40px" }}>
                  <SelectControl
                    value={attributes.iconFrameHeightUnit || "px"}
                    options={[
                      { label: "px", value: "px" },
                      { label: "%", value: "%" },
                      { label: "em", value: "em" },
                      { label: "rem", value: "rem" },
                    ]}
                    onChange={(unit) => setAttributes({ iconFrameHeightUnit: unit })}
                  />
                </div>
              </div>
            </div>
          </>
        )}
      </PanelBody>

      <PanelBody title={__("Color", "zenblocks")} initialOpen={panelStates.iconFrameBgColor} onToggle={() => togglePanel("iconFrameBgColor")} className="zenblocks-nested-panel">
        <FontColorSetting label={__("Background Color", "zenblocks")} colorValue={attributes.iconFrameBgColor} onColorChange={(value) => setAttributes({ iconFrameBgColor: value })} />
      </PanelBody>

      <PanelBody title={__("Border", "zenblocks")} initialOpen={panelStates.iconFrameBorder} onToggle={() => togglePanel("iconFrameBorder")} className="zenblocks-nested-panel">
        <div style={{ marginBottom: "16px" }}>
          <label style={{ display: "block", marginBottom: "8px", fontSize: "11px", fontWeight: "500", textTransform: "uppercase" }}>{__("Display Position", "zenblocks")}</label>
          <div className="border-side-button-group" style={{ display: "flex", gap: "4px" }}>
            {["top", "right", "bottom", "left"].map((side) => {
              const sides = attributes.iconFrameBorderSides || ["top", "right", "bottom", "left"];
              const isChecked = sides.includes(side);
              return (
                <button
                  key={side}
                  type="button"
                  className={`border-side-button ${isChecked ? "is-checked" : ""}`}
                  onClick={() => {
                    const currentSides = attributes.iconFrameBorderSides || ["top", "right", "bottom", "left"];
                    const newSides = isChecked ? currentSides.filter((s) => s !== side) : [...currentSides, side];
                    setAttributes({ iconFrameBorderSides: newSides });
                  }}
                >
                  {side === "top" ? "T" : side === "right" ? "R" : side === "bottom" ? "B" : "L"}
                </button>
              );
            })}
          </div>
        </div>

        <div style={{ marginBottom: "16px" }}>
          <FontColorSetting label={__("Color", "zenblocks")} colorValue={attributes.iconFrameBorderColor} onColorChange={(value) => setAttributes({ iconFrameBorderColor: value })} />
        </div>

        <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
          <div style={{ flex: 1 }}>
            <RangeControl label={__("Size", "zenblocks")} value={attributes.iconFrameBorderWidth || 1} onChange={(value) => setAttributes({ iconFrameBorderWidth: value })} min={0} max={50} step={1} />
          </div>
          <div style={{ minWidth: "40px" }}>
            <SelectControl value={attributes.iconFrameBorderWidthUnit || "px"} options={[{ label: "px", value: "px" }]} onChange={(unit) => setAttributes({ iconFrameBorderWidthUnit: unit })} />
          </div>
        </div>
      </PanelBody>

      <PanelBody title={__("Border Radius", "zenblocks")} initialOpen={panelStates.iconFrameRadius} onToggle={() => togglePanel("iconFrameRadius")} className="zenblocks-nested-panel">
        <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
          <div style={{ flex: 1 }}>
            <RangeControl value={attributes.iconFrameRadius || 0} onChange={(value) => setAttributes({ iconFrameRadius: value })} min={0} max={999} step={1} />
          </div>
          <div style={{ minWidth: "40px" }}>
            <SelectControl
              value={attributes.iconFrameRadiusUnit || "px"}
              options={[
                { label: "px", value: "px" },
                { label: "%", value: "%" },
              ]}
              onChange={(unit) => setAttributes({ iconFrameRadiusUnit: unit })}
            />
          </div>
        </div>
      </PanelBody>

      <PanelBody title={__("Transition", "zenblocks")} initialOpen={panelStates.iconFrameTransition} onToggle={() => togglePanel("iconFrameTransition")} className="zenblocks-nested-panel">
        <div style={{ marginBottom: "16px" }}>
          <RangeControl
            label={__("Duration (ms)", "zenblocks")}
            value={attributes.iconFrameTransitionDuration || 300}
            onChange={(value) => setAttributes({ iconFrameTransitionDuration: value })}
            min={0}
            max={2000}
            step={50}
          />
        </div>
        <div style={{ marginBottom: "16px" }}>
          <RangeControl
            label={__("Delay (ms)", "zenblocks")}
            value={attributes.iconFrameTransitionDelay || 200}
            onChange={(value) => setAttributes({ iconFrameTransitionDelay: value })}
            min={0}
            max={2000}
            step={50}
          />
        </div>
        <div style={{ marginBottom: "16px" }}>
          <SelectControl
            label={__("Easing", "zenblocks")}
            value={attributes.iconFrameTransitionEasing || "ease"}
            options={[
              { label: "ease", value: "ease" },
              { label: "ease-in", value: "ease-in" },
              { label: "ease-out", value: "ease-out" },
              { label: "ease-in-out", value: "ease-in-out" },
              { label: "linear", value: "linear" },
              { label: "cubic-bezier(0.4, 0, 0.2, 1)", value: "cubic-bezier(0.4, 0, 0.2, 1)" },
              { label: "cubic-bezier(0.4, 0, 1, 1)", value: "cubic-bezier(0.4, 0, 1, 1)" },
              { label: "cubic-bezier(0, 0, 0.2, 1)", value: "cubic-bezier(0, 0, 0.2, 1)" },
            ]}
            onChange={(value) => setAttributes({ iconFrameTransitionEasing: value })}
          />
        </div>
      </PanelBody>
    </PanelBody>
  );
};

export default IconFrameSetting;
