import { createHigherOrderComponent } from "@wordpress/compose";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, SelectControl, RangeControl, Icon } from
  "@wordpress/components";
import { __ } from "@wordpress/i18n";


// Custom hover icon
const hoverIcon = (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 15.2056V1.41396C2 1.09638 2.34857 0.894983 2.62355 1.05765L7.87531 4.14054C8.14254 4.29933 8.30521 4.58206 8.30521 4.8919V17.1963C8.30521 17.2506 8.29746 17.3009 8.2781 17.3513C7.53836 19.3187 5.88847 20.3644 5.04803 20.7866C4.75756 20.9338 4.40512 20.8292 4.23471 20.5542C2.43765 17.6805 2.05035 15.5465 2.00387 15.2676C2 15.2482 2 15.2289 2 15.2056ZM9.83503 4.00507C9.74983 4.03606 9.69173 4.10577 9.67237 4.19097C9.54069 4.80291 9.15339 7.2971 11.2525 8.83855C13.3517 10.38 20.0442 13.978 21.5624 14.7913C21.7212 14.8765 21.9148 14.7758 21.9381 14.5977C22.0814 13.5675 22.2131 10.4652 19.4207 7.00663C16.0783 2.86642 11.6824 3.35054 9.83116 4.00507H9.83503ZM21.4462 16.6503C21.4616 16.5612 21.4345 16.476 21.3687 16.4179C20.9078 15.9958 18.952 14.3962 16.5623 15.4303C14.1378 16.476 7.6816 20.411 6.21374 21.3134C6.05882 21.4063 6.0472 21.6232 6.1905 21.7355C7.00383 22.3784 9.61809 24.0632 14.01 23.4048C19.2734 22.6186 21.0821 18.579 21.45 16.6542L21.4462 16.6503Z" fill="#1C7E6E" />
  </svg>
);

const withHoverControls = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { attributes, setAttributes, isSelected } = props;
    const {
      blynexHoverEffect = "none",
      blynexHoverIntensity = 0.5,
      blynexHoverScale = 1.05,
      blynexHoverDuration = 0.3,
    } = attributes;

    return (
      <>
        <BlockEdit {...props} />
        {isSelected &&
          (props.name === "core/cover" || props.name === "core/image") && (
            <InspectorControls>
              <PanelBody
                title={
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "8px",
                    }}
                  >
                    <Icon icon={hoverIcon} />
                    <span>Hover Effects</span>
                  </div>
                }
                initialOpen={true}
                className="blynex-hover-panel"
              >
                <SelectControl
                  label="Effect Type"
                  value={blynexHoverEffect}
                  options={[
                    { label: "None", value: "none" },
                    { label: "Zoom", value: "zoom" },
                    { label: "Fade", value: "fade" },
                    { label: "Grayscale", value: "grayscale" },
                    { label: "Blur", value: "blur" },
                    { label: "Glow", value: "glow" },
                  ]}
                  onChange={(value) =>
                    setAttributes({ blynexHoverEffect: value })
                  }
                />

                {blynexHoverEffect !== "none" && (
                  <>
                    <RangeControl
                      label="Effect Strength"
                      value={blynexHoverIntensity}
                      onChange={(value) =>
                        setAttributes({ blynexHoverIntensity: value })
                      }
                      min={0.1}
                      max={1}
                      step={0.1}
                    />

                    <RangeControl
                      label="Duration (seconds)"
                      value={blynexHoverDuration}
                      onChange={(value) =>
                        setAttributes({ blynexHoverDuration: value })
                      }
                      min={0.1}
                      max={1}
                      step={0.1}
                    />

                    {props.name === "core/cover" && (
                      <RangeControl
                        label="Zoom Scale"
                        value={blynexHoverScale}
                        onChange={(value) =>
                          setAttributes({ blynexHoverScale: value })
                        }
                        min={1}
                        max={1.5}
                        step={0.05}
                      />
                    )}
                  </>
                )}
              </PanelBody>
            </InspectorControls>
          )}
      </>
    );
  };
}, "withHoverControls");

wp.hooks.addFilter(
  "editor.BlockEdit",
  "blynex/hover-effect-controls",
  withHoverControls
);