import { Link, usePage } from "@inertiajs/react"
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"
import Table from "@/Components/Table"
import { useSearchParams } from "@/utils/format"

function Index(props) {
  return (
    <AuthenticatedLayout title={props?.title}>
      <TableIndex />
    </AuthenticatedLayout>
  )
}

const TableIndex = (tableProps) => {
  let { tableHeader = null } = tableProps

  const { props } = usePage()
  if (!tableHeader) {
    tableHeader = useTableHeader()
  }

  return (
    <>
      <Table
        search
        addButton={false}
        tableHeader={tableHeader}
        tableBody={props?.[props?.page?.name]?.data ?? []}
        tablePage={props?.[props?.page?.name]}
        tableAction={(data) => (
          <>
            <li>
              <Link href={`/app/notifications/${data.id}`} className="">
                Lihat Notifikasi
              </Link>
            </li>
          </>
        )}
        {...tableProps}
      />
    </>
  )
}

const useTableHeader = () => {
  const { page, isAdmin, location } = usePage().props
  const { params } = useSearchParams(location)

  const header = [
    {
      label: "#",
      value: "id",
      type: "numbering",
    },
    {
      value: "title",
      label: "Judul",
      isSearchable: true,
      className: "text-[13px] w-[10%] md:w-[200px] !whitespace-pre",
    },
    {
      value: "message",
      label: "Pesan",
      isSearchable: true,
    },
    {
      value: "is_read",
      label: "Dibaca",
      type: "boolean"
    },
    {
      label: "Waktu",
      value: "created_at",
      type: "date",
      isSearchable: true,
      className: "text-[13px] w-[10%] md:w-[100px] !whitespace-pre",
    },
    {
      label: "Aksi",
      value: "id",
      type: "action",
    },
  ]

  return header
}

const useFilterOptions = () => {
  const filterOptions = []

  return filterOptions
}

const HeaderProvider = ({ children }) => {
  const header = useTableHeader()
  return children(header)
}

const FilterProvider = ({ children }) => {
  const filterOptions = useFilterOptions()
  return children(filterOptions)
}

Index.Table = TableIndex
Index.HeaderProvider = HeaderProvider
Index.FilterProvider = FilterProvider

const NotificationIndex = Index
export default NotificationIndex
