import { ChevronDown } from "react-feather"

import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"

import BenefitValue from "../BenefitValue"
import LevelSummary from "../LevelSummary"

import styles from "./largeTable.module.css"

import {
  BenefitTableHeaderProps,
  LargeTableProps,
} from "@/types/components/loyalty/blocks"

export default function LargeTable({ levels }: LargeTableProps) {
  return (
    <table className={styles.table}>
      <thead className={styles.thead}>
        <tr className={styles.iconRow}>
          <th className={styles.verticalTableHeader} />

          {levels.map((level) => {
            return (
              <th key={level.tier} className={styles.iconTh}>
                <Image
                  height={50}
                  width={100}
                  alt={level.name}
                  src={level.icon}
                />
              </th>
            )
          })}
        </tr>
        <tr>
          <th />
          {levels.map((level) => {
            return (
              <th key={level.tier} className={styles.summaryTh}>
                <LevelSummary level={level} />
              </th>
            )
          })}
        </tr>
      </thead>
      <tbody>
        {levels[0].benefits.map((benefit, index) => {
          return (
            <tr key={benefit.name} className={styles.tr}>
              <th scope={"row"} className={styles.benefitTh}>
                <BenefitTableHeader
                  name={benefit.name}
                  description={benefit.description}
                />
              </th>
              {levels.map((level) => {
                return (
                  <td key={level.tier} className={styles.td}>
                    <BenefitValue benefit={level.benefits[index]} />
                  </td>
                )
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

function BenefitTableHeader({ name, description }: BenefitTableHeaderProps) {
  return (
    <details className={styles.details}>
      <summary className={styles.summary}>
        <hgroup className={styles.benefitHeader}>
          <Title
            as="h5"
            level="h2"
            textTransform={"regular"}
            className={styles.benefitTitle}
          >
            {name}
          </Title>
          <span className={styles.chevron}>
            <ChevronDown />
          </span>
        </hgroup>
      </summary>
      <p className={styles.benefitDescription}>{description}</p>
    </details>
  )
}