import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"
import { usePage } from "@inertiajs/react"
import VendorIndex from "./Index"
import DetailModalItem from "@/Components/Default/DetailModalItem"
import ShowNavigation from "@/Components/Default/ShowNavigation"

function Show(props) {
  const links = useShowNavigation()

  return (
    <AuthenticatedLayout title={props?.title}>
      <ShowNavigation links={links} pageUrl={props?.page?.url} />
    </AuthenticatedLayout>
  )
}

const DetailShow = () => {
  const { props } = usePage()

  const rowPropsBase = {
    wrapperClassName: "flex flew-row flex-wrap justify-between",
    labelClassName: "flex-1 font-medium text-sm md:text-base",
    valueClassName: "text-sm md:text-base",
    emptyCheck: false,
  }

  return (
    <VendorIndex.HeaderProvider>
      {(header) => {
        let hiddenHeader = ["numbering", "action"]
        let tableHeader = header.filter((h) => !hiddenHeader.includes(h.type))
        return (
          <div>
            <DetailModalItem data={props?.[props?.page?.name]} tableHeader={tableHeader} rowPropsBase={rowPropsBase} className={"flex flex-col w-full"} />
          </div>
        )
      }}
    </VendorIndex.HeaderProvider>
  )
}

const useShowNavigation = (pageUrl = null) => {
  const { props } = usePage()

  if (!pageUrl) {
    pageUrl = props?.page?.url
  }

  let links = [
    {
      name: "detail",
      label: "Detail",
      url: "?show=detail",
      isDefault: true,
      Component: DetailShow,
      wrapperClassName: "w-full max-w-5xl border p-4 mt-2",
    },
  ]

  return links
}

const NavigationProvider = ({ children }) => {
  const links = useShowNavigation()
  return children(links)
}

Show.NavigationProvider = NavigationProvider

const VendorShow = Show
export default VendorShow
