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";
import { TrashIcon } from "@heroicons/react/24/solid";

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 { 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}>
          <TrashIcon className="w-6 h-6 fill-white" />
        </button>
      </div>
    </li>
  );
};