import Link from "next/link"
import { cva } from "class-variance-authority"
import { BlockListItemsEnum } from "@/types/requests/blocks/list"
import type { ListItem } from "@/types/requests/blocks/list"
import styles from "./list.module.css"

const config = {
  variants: {
    type: {
      default: styles.disc,
      checkmark: styles.checkmark,
    },
  },
  defaultVariants: {
    type: "default",
  },
} as const

const listItemStyle = cva(styles.listItem, config)

export default function ListItem({ listItem }: { listItem: ListItem }) {
  const typeName = listItem.__typename

  switch (typeName) {
    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem:
      return (
        <li
          className={listItemStyle({
            type: listItem.list_item.list_item_style,
          })}
        >
          {listItem.list_item.subtitle ? (
            <>
              <strong>{listItem.list_item.title}</strong>
              <br />
              <span>{listItem.list_item.subtitle}</span>
            </>
          ) : (
            listItem.list_item.title
          )}
        </li>
      )
    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink:
      return (
        <li
          className={listItemStyle({
            type: listItem.list_item_external_link.list_item_style,
          })}
        >
          <a
            className={styles.link}
            href={listItem.list_item_external_link.link.href}
          >
            <strong>{listItem.list_item_external_link.link.title}</strong>
          </a>
          {listItem.list_item_external_link.subtitle && (
            <span>
              <br />
              {listItem.list_item_external_link.subtitle}
            </span>
          )}
        </li>
      )
    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemInternalLink:
      const link = listItem.list_item_internal_link.pageConnection.edges[0]
      const linkUrlWithLocale = `/${link.node.system.locale}${link.node.url}`
      return (
        <li
          key={link.node.system.uid}
          className={listItemStyle({
            type: listItem.list_item_internal_link.list_item_style,
          })}
        >
          <Link href={linkUrlWithLocale} className={styles.link}>
            {listItem.list_item_internal_link.link_text}
          </Link>
          {listItem.list_item_internal_link.subtitle && (
            <span>
              <br />
              {listItem.list_item_internal_link.subtitle}
            </span>
          )}
        </li>
      )

    default:
      return null
  }
}