import { notFound } from 'next/navigation'
import directus from '~/lib/directus'

export const getServerSideProps = async ({ params }) => {
  const { slug } = params

  const {
    data: [vendor],
  } = await directus.items('vendors').readByQuery({
    fields: [
      //
      '*',
      'categories.categories_id.slug',
      'categories.categories_id.name',
      'categories.categories_id.parent_id',
      'categories.categories_id.subcategories.slug',
      'categories.categories_id.subcategories.name',
    ],
    limit: 1,
    filter: { slug: { _eq: slug } },
  })

  if (!vendor) return notFound()

  return { props: { vendor } }
}

export default function VendorPage({ vendor }) {
  return (
    <div>
      <h1>{vendor.name}</h1>
      <p>{vendor.description}</p>

      <h2>Address</h2>
      <p>
        {vendor.address_line_1 && (
          <>
            {vendor.address_line_1}
            <br />
          </>
        )}
        {vendor.address_line_2 && (
          <>
            {vendor.address_line_2}
            <br />
          </>
        )}
        {vendor.city && (
          <>
            {vendor.city}
            <br />
          </>
        )}
        {vendor.state && (
          <>
            {vendor.state}
            <br />
          </>
        )}
        {vendor.country && (
          <>
            {vendor.country}
            <br />
          </>
        )}
      </p>

      {vendor.website && (
        <>
          <h2>Website</h2>
          <a href={vendor.website} target="_blank">
            {vendor.website}
          </a>
        </>
      )}

      {vendor.categories.length > 0 && (
        <>
          <h2>Categories</h2>
          <ul>
            {vendor.categories.map((cat) => (
              <li>{cat.categories_id.name}</li>
            ))}
          </ul>
        </>
      )}
    </div>
  )
}