import { useEffect } from "react"
import { usePage } from "@inertiajs/react"
import useFormBuilder from "@/utils/useFormBuilder"
import FormBuilder from "@/Components/FormBuilder"
import { slugify, useSearchParams } from "@/utils/format"

function MainForm({ isEdit = false, formOptions = {}, BackButton = null }) {
  const formConfig = { isEdit, getProperties, formOptions }
  const builderProps = useFormBuilder(formConfig)
  const { data, setData } = builderProps.form

  return <FormBuilder {...builderProps} BackButton={BackButton} />
}

const getProperties = (state) => {
  const { props, data, setData } = state
  const { params } = useSearchParams(props.location)

  const properties = [
    [
      {
        form: "select",
        props: {
          name: "user_id",
          label: "Pengguna",
          options: props.users,
          isReactSelect: true,
          isVirtualized: true,
          handleChange: (e) => setData("user_id", e?.value),
        },
      },
      {
        form: "input",
        props: {
          name: "title",
          label: "Judul",
          type: "text",
        },
      },
    ],
    [
      {
        form: "select",
        props: {
          name: "budget_id",
          label: "Anggaran",
          options: props.budgets,
          isReactSelect: true,
          isVirtualized: true,
          handleChange: (e) => setData("budget_id", e?.value),
        },
      },
      {
        form: "select",
        props: {
          name: "transaction_id",
          label: "Transaksi",
          options: props.transactions,
          isReactSelect: true,
          isVirtualized: true,
          handleChange: (e) => setData("transaction_id", e?.value),
        },
      },
      {
        form: "select",
        props: {
          name: "payment_id",
          label: "Pembayaran",
          options: props.payments,
          isReactSelect: true,
          isVirtualized: true,
          handleChange: (e) => setData("payment_id", e?.value),
        },
      },
    ],
    [
      {
        form: "input",
        props: {
          name: "type",
          label: "Tipe",
          type: "text",
        },
      },
      {
        form: "input",
        props: {
          name: "module_type",
          label: "Tipe Modul",
          type: "text",
        },
      },
    ],
    [
      {
        form: "input",
        props: {
          name: "link",
          label: "Link",
          type: "text",
        },
      },
      {
        form: "checkbox",
        props: {
          name: "is_read",
          label: "Sudah Dibaca",
        },
      },
      {
        form: "input",
        props: {
          name: "read_at",
          label: "Dibaca Pada",
          type: "date",
        },
      },
    ],
    [
      {
        form: "textarea",
        props: {
          name: "message",
          label: "Pesan",
        },
      },
    ],
  ]

  return properties
}

const PropertiesProvider = ({ children }) => {
  return children(getProperties)
}

MainForm.PropertiesProvider = PropertiesProvider

const NotificationMainForm = MainForm
export default NotificationMainForm
