"use client";
import { useEffect, useState } from "react";
import DraggablePanel from "@/components/DraggablePanel";
import Logo from "@/widgets/Logo";
import Preview from "@/components/Draggable/Preview";
import Draggable from "@/components/Draggable/Draggable";
import PreviewStore from "@/stores/previewStore";
import { useObserver } from "mobx-react-lite";
import ComponentsStore from "@/stores/componentStore";
import ComponentPaletteDrawer from "@/components/ComponentPaletteDrawer";

export default function Home() {
  const [isChangeSize, setIsSizeChangeSize] = useState(false);
  const [isDraggable, setIsDraggable] = useState(false);
  const { components } = ComponentsStore;
  // useEffect(() => {
  //   ComponentsStore.initComponent([
  //     {
  //       id: "1",
  //       x: 0,
  //       y: 0,
  //       width: 320,
  //       height: 160,
  //       component: () => <Logo />
  //     },
  //     {
  //       id: "2",
  //       x: 336,
  //       y: 0,
  //       width: 160,
  //       height: 320,
  //       component: () => <Logo />
  //     },
  //     {
  //       id: "3",
  //       x: 336,
  //       y: 0,
  //       width: 160,
  //       height: 320,
  //       component: () => <Logo />
  //     },
  //     {
  //       id: "4",
  //       x: 336,
  //       y: 0,
  //       width: 160,
  //       height: 320,
  //       component: () => <Logo />
  //     },
  //     {
  //       id: "5",
  //       x: 336,
  //       y: 0,
  //       width: 160,
  //       height: 320,
  //       component: () => <Logo />
  //     },
  //     {
  //       id: "6",
  //       x: 336,
  //       y: 0,
  //       width: 160,
  //       height: 320,
  //       component: () => <Logo />
  //     },
  //   ]);
  // }, [])

  return useObserver(() => (
    <div className="h-screen w-screen p-4">
      <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>
      <ComponentPaletteDrawer />
      <DraggablePanel draggable={isDraggable}>
        {ComponentsStore.components.map((item) => (
          <Draggable
            key={item.id}
            id={item.id}
            x={item.x}
            y={item.y}
            width={item.width}
            height={item.height}
            componentsId={item.componentsId}
          />
        ))}
      </DraggablePanel>
    </div>
  ));
}