"use client";
import "@/app/globals.css";
import { useRef } from "react";
export default function ComponentPaletteDrawer() {
  const checkboxRef = useRef<HTMLInputElement>(null);

  const onSubmit = (e: SubmitEvent) => {
    e.preventDefault();
    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">
        <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">
              <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>
            <form onSubmit={onSubmit} className="w-full">
              <fieldset className="fieldset w-full">
                <legend className="fieldset-legend">小部件</legend>
                <select defaultValue="请选择小部件" className="select w-full">
                  <option disabled={true}>请选择小部件</option>
                  <option>文本</option>
                  <option>Logo</option>
                </select>
                <p className="fieldset-label">你可以选择一款你喜欢的小部件</p>
              </fieldset>

              <fieldset className="fieldset w-full">
                <legend className="fieldset-legend">配置信息</legend>
                <textarea
                  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>
  );
}