"use client";
import "@/app/globals.css";
import { useEffect, useRef, useState } from "react";
import ComponentsStore from "@/stores/componentStore";
import { useWidgets } from "@/hooks/useWidgets";

export default function ComponentPaletteDrawer() {
  const checkboxRef = useRef<HTMLInputElement>(null);
  const [widgetsId, setwidgetsId] = useState("logo");
  const [data, setData] = useState("");
  const {widgets, widgetsLibrary} = useWidgets();

  useEffect(() => {
    try {
      const widget = widgets.find(item => item.id === widgetsId);
      const defaultConfig = widget?.defaultConfig({})
      const stringData = JSON.stringify(defaultConfig, undefined, 4);
      setData(stringData);
    } catch (error) {
      
    }
  }, [widgetsId]);

  const onSubmit = (e: SubmitEvent) => {
    e.preventDefault();
    ComponentsStore.addComponent(widgetsId, data && JSON.parse(data));
    checkboxRef.current?.click();
  };

  return (
    <div className="drawer drawer-end">
      <input
        ref={checkboxRef}
        id="ComponentPaletteDrawer"
        type="checkbox"
        className="drawer-toggle"
      />
      <div className="drawer-content">
        {/* Page content here */}
        <label
          htmlFor="ComponentPaletteDrawer"
          className="drawer-button btn btn-primary"
        >
          Add Component
        </label>
      </div>
      <div className="drawer-side z-50">
        <label
          htmlFor="ComponentPaletteDrawer"
          aria-label="close sidebar"
          className="drawer-overlay"
        ></label>
        <div className="menu min-h-full w-2/5 bg-base-200 p-0 text-base-content">
          <div className="navbar bg-base-100 shadow-sm">
            <a className="btn text-xl btn-ghost">daisyUI</a>
          </div>

          <div className="p-4">
            <div role="alert" className="alert alert-warning mb-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6 shrink-0 stroke-current"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                />
              </svg>
              <span>Warning: 内容处于开发阶段仅供参考！</span>
            </div>

            <div className="resize-y border overflow-hidden max-w-full h-64 ">
              {
9              }
            </div>

            <form onSubmit={onSubmit} className="w-full">
              <fieldset className="fieldset w-full">
                <legend className="fieldset-legend">小部件</legend>
                <select
                  value={widgetsId}
                  onChange={(e) => setwidgetsId(e.target.value)}
                  className="select w-full"
                >
                  <option disabled={true}>请选择小部件</option>
                  {
                    widgets.map(item => {
                      return (<option value={item.id}>{item.name}</option>)
                    })
                  }
                </select>
                <p className="fieldset-label">你可以选择一款你喜欢的小部件</p>
              </fieldset>

              <fieldset className="fieldset w-full">
                <legend className="fieldset-legend">配置信息</legend>
                <textarea
                  value={data}
                  onChange={(e) => setData(e.target.value)}
                  className="textarea h-24 w-full"
                  placeholder="请输入 JSON 格式的配置信息"
                ></textarea>

                <p className="fieldset-label">JSON格式的配置信息</p>
              </fieldset>
              <button className="btn w-full btn-primary">确认</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}