import { useState, useRef, useEffect, useCallback } from "react";
import { AddCircle, MinusCirlce } from "iconsax-react";
import { useEditorStore } from "../store/editorStore";

const ZoomControls = () => {
  const { zoom, setZoom, zoomIn, zoomOut } = useEditorStore();
  const sliderRef = useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);

  const MIN_ZOOM = 0.5;
  const MAX_ZOOM = 2;
  const SLIDER_WIDTH = 80;

  const sliderPosition = ((zoom - MIN_ZOOM) / (MAX_ZOOM - MIN_ZOOM)) * SLIDER_WIDTH;

  const updateZoomFromPosition = useCallback((clientX: number) => {
    if (!sliderRef.current) return;

    const trackElement = sliderRef.current.querySelector('.slider-track') as HTMLElement;
    if (!trackElement) return;

    const rect = trackElement.getBoundingClientRect();
    const x = clientX - rect.left;
    const clampedX = Math.max(0, Math.min(SLIDER_WIDTH, x));
    // وقتی به راست می‌کشیم (clampedX بیشتر)، zoom باید بیشتر شود
    const newZoom = MIN_ZOOM + (clampedX / SLIDER_WIDTH) * (MAX_ZOOM - MIN_ZOOM);
    setZoom(newZoom);
  }, [setZoom]);

  const handleSliderMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true);
    updateZoomFromPosition(e.clientX);
  };

  const handleMouseMove = useCallback((e: MouseEvent) => {
    if (isDragging) {
      updateZoomFromPosition(e.clientX);
    }
  }, [isDragging, updateZoomFromPosition]);

  const handleMouseUp = useCallback(() => {
    setIsDragging(false);
  }, []);

  useEffect(() => {
    if (isDragging) {
      window.addEventListener("mousemove", handleMouseMove);
      window.addEventListener("mouseup", handleMouseUp);
      return () => {
        window.removeEventListener("mousemove", handleMouseMove);
        window.removeEventListener("mouseup", handleMouseUp);
      };
    }
  }, [isDragging, handleMouseMove, handleMouseUp]);

  return (
    <div className="fixed right-[390px]  mx-auto w-fit bottom-1 bg-white/20 rounded-full px-4 py-2.5 shadow-lg flex items-center gap-3 z-50">
      {/* <button
        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
        title="نمایش گرید"
      >
        <Grid8 size={18} color="black" variant="Outline" />
      </button> */}

      <button
        onClick={zoomIn}
        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
        title="بزرگ‌نمایی"
      >
        <AddCircle size={18} color="black" />
      </button>

      <div
        ref={sliderRef}
        className="relative flex items-center cursor-pointer"
        onMouseDown={handleSliderMouseDown}
      >
        <div className="slider-track w-20 h-0.5 bg-gray-300 relative">
          <div
            className={`absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-black cursor-pointer ${!isDragging ? 'transition-all' : ''}`}
            style={{ left: `${sliderPosition}px` }}
          />
        </div>
      </div>

      <button
        onClick={zoomOut}
        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
        title="کوچک‌نمایی"
      >
        <MinusCirlce size={18} color="black" />
      </button>



      <div className="text-sm font-medium text-black">1/1</div>
    </div>
  );
};

export default ZoomControls;