"use client";
import { useState } from "react";
import DraggablePanel from "@/components/DraggablePanel";
import Logo from "@/components/Logo";
import Preview from "@/components/Draggable/Preview";
import Draggable from "@/components/Draggable/Draggable";
import { useComponentsStore } from "@/hooks/useComponentsStore";

export default function Home() {
  const [isChangeSize, setIsSizeChangeSize] = useState(false);
  const [isDraggable, setIsDraggable] = useState(false);
  const [units, setUnit] = useComponentsStore([
    {
      id: "1",
      x: 0,
      y: 0,
      width: 320,
      height: 160,
      component: ()=> <Logo />
    },
    {
      id: "2",
      x: 336,
      y: 0,
      width: 160,
      height: 320,
      component: ()=> <Logo />
    },
  ]);

  return (
    <div className="h-screen w-screen p-4">
      <Preview x={400} y={234} width={234} height={234} />
      <label className="swap">
        <input
          type="checkbox"
          onChange={(e) => setIsSizeChangeSize(e.target.checked)}
        />
        <div className="swap-on">编辑</div>
        <div className="swap-off">锁定</div>
      </label>
      <label className="swap">
        <input
          type="checkbox"
          onChange={(e) => setIsDraggable(e.target.checked)}
        />
        <div className="swap-on">拖拽</div>
        <div className="swap-off">锁定</div>
      </label>
      <DraggablePanel draggable={isDraggable}>
        {units.map((item) => (
          <Draggable
            key={item.id}
            id={item.id}
            x={item.x}
            y={item.y}
            width={item.width}
            height={item.height}
            component={() => <Logo />}
          />
        ))}
      </DraggablePanel>
    </div>
  );
}