import { useRecoilValue } from "recoil";
import { SchemaEditAtom } from "../../recoil/atoms/schema";
import { TEMPLATE_TYPES } from "../../constants/TemplateTypes";
import { FC, PropsWithChildren } from "react";

interface IProps {
  bind: InputBinder;
}

export const FieldTypeInput: FC<PropsWithChildren<IProps>> = ({ bind }) => {
  const schema = useRecoilValue(SchemaEditAtom);

  return (
    <label className="w-min">
      Type:
      <input type="text" {...bind} list="type-editor-type-list" />
      <datalist id="type-editor-type-list">
        {Object.keys(TEMPLATE_TYPES).map((k) => (
          <option key={"templatetypes" + k} className="capitalize" value={k}>
            {k}
          </option>
        ))}
        {Object.keys(schema.types).map((k) => (
          <option key={"schematypes" + k} className="capitalize" value={k}>
            {k}
          </option>
        ))}
      </datalist>
    </label>
  );
};