"use client"

import { DbForm, DbFormSubmit, type DbFormSchema } from "@/components/form-rjsf"
import React from "react"

const TabSingleSelects = ({ className }: { className?: string }) => {
  const [data, setData] = React.useState<Record<string, unknown>>({})

  const SINGLE_SELECT_SCHEMA = {
    type: "object",
    required: [
      "simple_enum",
      "simple_enum_default",
      "object_enum",
      "enum_radio_stacked",
      "enum_radio_inline",
    ],
    properties: {
      simple_enum: {
        title: "Simple Enum",
        enum: ["Chuck", "Norris"],
        // placeholder: "Select a character",
      },
      simple_enum_default: {
        title: "Simple Enum w/ default",
        enum: ["Chuck", "Norris"],
        default: "Chuck",
        description: "Use default prop to automatically fill the field",
      },
      object_enum: {
        title: "Object Enum",
        placeholder: "Select a city",
        enum: [
          {
            name: "New York",
            lat: 40,
            lon: 74,
          },
          {
            name: "Amsterdam",
            lat: 52,
            lon: 5,
          },
          {
            name: "Hong Kong",
            lat: 22,
            lon: 114,
          },
        ],
        enumNames: ["NYC", "AMS", "HKG"],
        description: "Use `enumNames` to display label",
      },
      enum_radio_stacked: {
        title: "Enum w/ radio (stacked)",
        enum: ["Apple", "Banana", "Grape", "Orange", "Pear", "Watermelon"],
        widget: "radio",
        description: "Use `widget:radio` to change the input type",
      },
      enum_radio_inline: {
        title: "Enum w/ radio (inline)",
        enum: ["Apple", "Banana", "Grape", "Orange", "Pear", "Watermelon"],
        widget: "radio",
        description:
          "Use `options.inline:true` to display the radio buttons inline",
        options: {
          inline: true,
        },
      },
    },
  } satisfies DbFormSchema

  return (
    <div className={className}>
      <DbForm
        id="form-tab-single-select"
        schema={SINGLE_SELECT_SCHEMA}
        formData={data}
        onChange={(e) => {
          setData((e.formData ?? {}) as Record<string, unknown>)
        }}
        liveValidate={false}
      />
      <DbFormSubmit form="form-tab-single-select">Submit</DbFormSubmit>
    </div>
  )
}

export { TabSingleSelects }