import { ChevronDown } from "react-feather"

import Title from "@/components/TempDesignSystem/Text/Title"
import { getHighestLevel } from "@/utils/loyaltyTable"

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

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

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

export default function LargeTable({
  levels,
  activeLevel,
  Select,
}: LargeTableProps) {
  const highestLevel = getHighestLevel(levels)
  return (
    <table className={styles.table}>
      <DesktopHeader
        levels={levels}
        activeLevel={activeLevel}
        Select={Select}
      />
      <tbody className={styles.tbody}>
        {highestLevel?.benefits
          .filter((benefit) => benefit.unlocked)
          .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, idx) => {
                  return (
                    <td key={"icon" + level.level + idx} 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}
        dangerouslySetInnerHTML={{ __html: description }}
      />
    </details>
  )
}