import { useState } from "react";

import type { components } from "../api/schema";
import { FieldList } from "./field-list";
import { FieldForm } from "./field-form";

type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];

export function FieldsPage() {
  const [selected, setSelected] = useState<FieldDefinitionView | null>(null);

  return (
    <div className="grid h-full grid-cols-[20rem_1fr]">
      <div className="overflow-hidden border-r">
        <FieldList selectedKey={selected?.key ?? null} onSelect={setSelected} />
      </div>
      <div className="overflow-hidden">
        <FieldForm
          key={selected?.key ?? "create"}
          editing={selected}
          onDone={() => setSelected(null)}
        />
      </div>
    </div>
  );
}