upscayl/renderer/components/upscayl-tab/view/ImageOptions.tsx

import { lensSizeAtom, viewTypeAtom } from "@/atoms/userSettingsAtom";
import SidebarClosed from "@/components/icons/SidebarClosed";
import SidebarOpened from "@/components/icons/SidebarOpened";
import { useAtom } from "jotai";
import { useEffect, useState } from "react";

const ImageOptions = ({
  zoomAmount,
  setZoomAmount,
  resetImagePaths,
  hideZoomOptions,
}: {
  zoomAmount: string;
  setZoomAmount: (arg: any) => void;
  resetImagePaths: () => void;
  hideZoomOptions?: boolean;
}) => {
  const [openSidebar, setOpenSidebar] = useState(false);
  const [viewType, setViewType] = useAtom(viewTypeAtom);
  const [lensSize, setLensSize] = useAtom(lensSizeAtom);

  useEffect(() => {
    if (!localStorage.getItem("zoomAmount")) {
      localStorage.setItem("zoomAmount", zoomAmount);
    } else {
      setZoomAmount(localStorage.getItem("zoomAmount"));
    }
  }, []);

  return (
    <div
      onDoubleClick={(e) => {
        e.stopPropagation();
      }}
      className="absolute h-full w-full"
    >
      <div
        className={`fixed right-0 top-0 z-50 h-screen w-[28rem] bg-base-100 text-base-content shadow-xl shadow-black transition-all duration-500 ${
          openSidebar ? "right-0" : "-right-full translate-x-full"
        }`}
      >
        <div
          className={`group rounded-btn absolute right-[100%] top-1/2 z-50 flex cursor-pointer items-center gap-2 rounded-r-none bg-base-100 p-4 transition-all duration-500`}
          onClick={() => {
            setOpenSidebar(!openSidebar);
          }}
        >
          {openSidebar ? (
            <SidebarOpened className="text-xl text-white" />
          ) : (
            <SidebarClosed className="text-xl text-white" />
          )}
        </div>

        <div className="flex flex-col justify-center gap-5 overflow-auto p-5">
          <button className="btn btn-primary" onClick={resetImagePaths}>
            Reset Image
          </button>

          <div className="flex flex-row items-center gap-2">
            <p className="text-sm font-medium">Lens View</p>
            <input
              type="checkbox"
              className="toggle"
              checked={viewType === "slider"}
              onChange={(e) => {
                setViewType(e.target.checked ? "slider" : "lens");
              }}
            />
            <p className="text-sm font-medium">Slider View</p>
          </div>

          <div className="flex flex-col gap-2">
            <p className="text-sm font-medium">Zoom Amount ({zoomAmount}%)</p>
            <input
              type="range"
              min="100"
              max="1000"
              step={10}
              className="range range-md"
              value={parseInt(zoomAmount)}
              onChange={(e) => {
                setZoomAmount(e.target.value);
                localStorage.setItem("zoomAmount", e.target.value);
              }}
            />
          </div>

          <div className="flex flex-col gap-2">
            <p className="text-sm font-medium">Lens Size ({lensSize / 10})</p>
            <input
              type="range"
              min="20"
              max="400"
              step={10}
              className="range range-md"
              value={lensSize}
              onChange={(e) => {
                setLensSize(parseInt(e.target.value));
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ImageOptions;