import { __ } from "@wordpress/i18n";
import { useState } from "@wordpress/element";
import { RangeControl, SelectControl, Button, TextControl, Notice } from "@wordpress/components";
import ProFeatureOverlay from "../../ProFeatureOverlay";
import PanelBodyWithSync from "../../PanelBodyWithSync";

const DEFAULT_VALUES = {
  styleTransitionDuration: 300,
  styleTransitionDelay: 0,
  styleTransitionEasing: "ease",
};

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 StylingTransitionSetting = ({ attributes, setAttributes, title, initialOpen = false, opened, onToggle, isPro = false, hoverAnimation, learnMorePath = "" }) => {
  const isTextAnimationActive = hoverAnimation && hoverAnimation !== "none";
  const currentEasing = attributes.styleTransitionEasing || DEFAULT_VALUES.styleTransitionEasing;
  const isPresetValue = EASING_PRESETS.some((preset) => preset.value === currentEasing && preset.value !== "custom");
  const [isCustomMode, setIsCustomMode] = useState(!isPresetValue);

  const handleReset = () => {
    setAttributes({
      styleTransitionDuration: DEFAULT_VALUES.styleTransitionDuration,
      styleTransitionDelay: DEFAULT_VALUES.styleTransitionDelay,
      styleTransitionEasing: DEFAULT_VALUES.styleTransitionEasing,
    });
    setIsCustomMode(false);
  };

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

  const isChanged =
    attributes.styleTransitionDuration !== DEFAULT_VALUES.styleTransitionDuration ||
    attributes.styleTransitionDelay !== DEFAULT_VALUES.styleTransitionDelay ||
    attributes.styleTransitionEasing !== DEFAULT_VALUES.styleTransitionEasing;

  const content = (
    <div className="zenblocks-inspector-style-transition" style={{ padding: "16px 0" }}>
      {isTextAnimationActive && (
        <Notice status="warning" isDismissible={false} className="zenblocks-transition-notice">
          {__(
            "This setting is not applied because text animation is active.",
            "zenblocks"
          )}
        </Notice>
      )}
      <div style={{ marginBottom: "16px" }}>
        <RangeControl
          label={__("Duration (ms)", "zenblocks")}
          value={attributes.styleTransitionDuration ?? DEFAULT_VALUES.styleTransitionDuration}
          onChange={(value) => setAttributes({ styleTransitionDuration: value })}
          min={0}
          max={2000}
          step={50}
        />
      </div>
      <div style={{ marginBottom: "16px" }}>
        <RangeControl
          label={__("Delay (ms)", "zenblocks")}
          value={attributes.styleTransitionDelay ?? DEFAULT_VALUES.styleTransitionDelay}
          onChange={(value) => setAttributes({ styleTransitionDelay: value })}
          min={0}
          max={2000}
          step={50}
        />
      </div>
      <div style={{ marginBottom: "16px" }}>
        <SelectControl
          label={__("Easing", "zenblocks")}
          value={isCustomMode ? "custom" : currentEasing}
          options={EASING_PRESETS}
          onChange={handleEasingChange}
        />
        {isCustomMode && (
          <TextControl
            label={__("Custom Value", "zenblocks")}
            value={currentEasing}
            onChange={(value) => setAttributes({ styleTransitionEasing: 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: "8px" }}>
          <Button variant="secondary" isSmall onClick={handleReset}>
            {__("Reset", "zenblocks")}
          </Button>
        </div>
      )}
    </div>
  );

  return (
    <PanelBodyWithSync
      title={title || __("Transition", "zenblocks")}
      initialOpen={initialOpen}
      opened={opened}
      onToggle={onToggle}
      className="zenblocks-nested-panel"
      titleClassName="zenblocks-panel-title--no-margin"
      level={2}
      panelType="settings"
      panelName="style-transition"
    >
      {isPro ? <ProFeatureOverlay featureName="トランジション" learnMorePath={learnMorePath}>{content}</ProFeatureOverlay> : content}
    </PanelBodyWithSync>
  );
};

export default StylingTransitionSetting;
