import { FC, useCallback, useEffect } from "react";
import { TEMPLATE_TYPES } from "@/constants/TemplateTypes";
import { SchemaEditAtom } from "@/recoil/atoms/schema";
import { Icon } from "@/components/Icon";
import { FieldTypes } from "./fieldtypes";
import { useAtom } from "jotai";
import { useInput } from "@/hooks/useInput";
import { Schema } from "@/types";

interface IProps {
  templateKey: string;
  update: (arg0: string, arg1: FieldTypes) => void;
  fieldType: FieldTypes;
}

export const TemplateEditor: FC<IProps> = ({
  templateKey,
  update,
  fieldType,
}) => {
  const [schema, setSchema] = useAtom(SchemaEditAtom);
  // const updateTemplate = useCallback(
  //   (t: FieldTypes | ((arg: FieldTypes) => FieldTypes)) => {
  //     update(templateKey, typeof t === "function" ? t(template) : t);
  //   },
  //   [templateKey, update, template],
  // );

  // const { bindProperty } = useObjectStateWrapper(template, updateTemplate);
  const { bind: bindFieldType, value } = useInput(fieldType);

  useEffect(() => {
    update(templateKey, value);
  });

  const deleteField = useCallback(() => {
    setSchema((s: Schema) => {
      const fields = { ...s.fields };
      delete fields[templateKey];
      return {
        ...s,
        schema: fields,
      };
    });
  }, [setSchema, templateKey]);
  return (
    <li className="odd:bg-black/50 p-2">
      <p className="font-bold">{templateKey}</p>
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4 pl-2">
          <label className="w-min">
            Type:
            <input
              type="text"
              {...bindFieldType}
              list="type-editor-type-list"
            />
            <datalist id="type-editor-type-list">
              {Object.keys(TEMPLATE_TYPES).map((k) => (
                <option key={"templatetype" + k} value={k}>
                  {k}
                </option>
              ))}
              {Object.keys(schema.types).map((k) => (
                <option key={"schematype" + k} value={k}>
                  {k}
                </option>
              ))}
            </datalist>
          </label>
        </div>
        <button className="no-default" onClick={deleteField}>
          <Icon
            icon="Trash"
            className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6"
          />
        </button>
      </div>
    </li>
  );
};