import { ChevronDown } from "react-feather"

import Title from "@/components/TempDesignSystem/Text/Title"
import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"

import BenefitValue from "../BenefitValue"
import DesktopHeader from "./DesktopHeader"

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

import type {
  BenefitTableHeaderProps,
  LargeTableProps,
} from "@/types/components/overviewTable"

export default function LargeTable({
  levels,
  activeLevel,
  Select,
}: LargeTableProps) {
  return (
    <table className={styles.table}>
      <DesktopHeader
        levels={levels}
        activeLevel={activeLevel}
        Select={Select}
      />
      <tbody className={styles.tbody}>
        {getUnlockedBenefits(levels).map((benefit) => {
          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, idx) => {
                return (
                  <td key={"icon" + level.level + idx} className={styles.td}>
                    <BenefitValue benefit={findBenefit(benefit, level)} />
                  </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}
        dangerouslySetInnerHTML={{ __html: description }}
      />
    </details>
  )
}