import { __ } from "@wordpress/i18n";
import { useState } from "@wordpress/element";
import { PanelBody, RangeControl, SelectControl, Button, TextControl } from "@wordpress/components";

const DEFAULT_VALUES = {
  iconAnimationTransitionDuration: 500,
  iconAnimationTransitionDelay: 200,
  iconAnimationTransitionEasing: "ease-in-out",
};

const EASING_PRESETS = [
  { 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)" },
  { label: __("Custom", "zenblocks"), value: "custom" },
];

const IconAnimationTransitionSetting = ({ attributes, setAttributes, title, initialOpen = false, panelState, onTogglePanel }) => {
  const currentEasing = attributes.iconAnimationTransitionEasing || DEFAULT_VALUES.iconAnimationTransitionEasing;
  const isPresetValue = EASING_PRESETS.some((preset) => preset.value === currentEasing && preset.value !== "custom");
  const [isCustomMode, setIsCustomMode] = useState(!isPresetValue);

  const handleReset = () => {
    setAttributes({
      iconAnimationTransitionDuration: DEFAULT_VALUES.iconAnimationTransitionDuration,
      iconAnimationTransitionDelay: DEFAULT_VALUES.iconAnimationTransitionDelay,
      iconAnimationTransitionEasing: DEFAULT_VALUES.iconAnimationTransitionEasing,
    });
    setIsCustomMode(false);
  };

  const handleEasingChange = (value) => {
    if (value === "custom") {
      setIsCustomMode(true);
    } else {
      setIsCustomMode(false);
      setAttributes({ iconAnimationTransitionEasing: value });
    }
  };

  const isChanged =
    attributes.iconAnimationTransitionDuration !== DEFAULT_VALUES.iconAnimationTransitionDuration ||
    attributes.iconAnimationTransitionDelay !== DEFAULT_VALUES.iconAnimationTransitionDelay ||
    attributes.iconAnimationTransitionEasing !== DEFAULT_VALUES.iconAnimationTransitionEasing;

  return (
    <PanelBody title={title || __("Transition", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel} className="zenblocks-panel zenblocks-panel--level-2 zenblocks-panel--settings zenblocks-panel--transition">
      <div className="zenblocks-inspector-icon-animation-transition" style={{ padding: "16px 0" }}>
        <div style={{ marginBottom: "16px" }}>
          <RangeControl
            label={__("Duration (ms)", "zenblocks")}
            value={attributes.iconAnimationTransitionDuration ?? DEFAULT_VALUES.iconAnimationTransitionDuration}
            onChange={(value) => setAttributes({ iconAnimationTransitionDuration: value })}
            min={0}
            max={2000}
            step={50}
          />
        </div>
        <div style={{ marginBottom: "16px" }}>
          <RangeControl
            label={__("Delay (ms)", "zenblocks")}
            value={attributes.iconAnimationTransitionDelay ?? DEFAULT_VALUES.iconAnimationTransitionDelay}
            onChange={(value) => setAttributes({ iconAnimationTransitionDelay: value })}
            min={0}
            max={2000}
            step={50}
          />
        </div>
        <div style={{ marginBottom: "" }}>
          <SelectControl label={__("Easing", "zenblocks")} value={isCustomMode ? "custom" : currentEasing} options={EASING_PRESETS} onChange={handleEasingChange} />
          {isCustomMode && (
            <TextControl
              label={__("Custom Value", "zenblocks")}
              value={currentEasing}
              onChange={(value) => setAttributes({ iconAnimationTransitionEasing: value })}
              placeholder="cubic-bezier(0.25, 0.1, 0.25, 1)"
              help={__("e.g. cubic-bezier(0.25, 0.1, 0.25, 1)", "zenblocks")}
            />
          )}
        </div>
        {isChanged && (
          <div style={{ marginTop: "16px" }}>
            <Button variant="secondary" isSmall onClick={handleReset}>
              {__("Reset", "zenblocks")}
            </Button>
          </div>
        )}
      </div>
    </PanelBody>
  );
};

export default IconAnimationTransitionSetting;
