import styles from "./styles.module.scss"
import Link from 'next/link'

type MegaMenuProps = {
  bibleText: string,
  bibleBook: string,
  groups: ItemGroupProps[],
  onItemClick?: () => void
}

type ItemProps = {
  title: string;
  description: string
  icon?: string
  href: string
  onClick?: () => void
}

type ItemGroupProps = {
  title: string,
  items: ItemProps[]
  onItemClick?: () => void
}

const Item = ({href, title, description, icon, onClick}: ItemProps) => {
  return (
    <Link
      href={href}
      className={styles.item}
      onClick={onClick}
      target={href.includes("/api") ? "_blank" : undefined}
    >
      {icon &&
        <div className={styles.itemIcon}>
        </div>
      }
      <div>
        <div className={styles.itemTitle}>
          {title}
        </div>
        <div className={styles.itemDescription}>
          {description}
        </div>
      </div>
    </Link>
  )
}

const ItemGroup = ({title, items, onItemClick}: ItemGroupProps) => {
  return (
    <div className={styles.itemGroup}>
      <div className={styles.groupTitle}>{title}</div>
      <div className={styles.itemGroupContent}>
        {items.map(item => <Item
          key={item.title}
          title={item.title}
          href={item.href}
          description={item.description}
          onClick={onItemClick}
        />)}
      </div>
    </div>
  )
}

export const MegaMenu = ({ bibleText, bibleBook, groups, onItemClick }: MegaMenuProps) => {
  return (
    <div className={styles.menu}>
      <div className={styles.bibleText}>
        <div className={styles.headerFont}>
          {bibleText}
        </div>
        <div className={styles.book}>
          {bibleBook}
        </div>
      </div>

      {groups.map(group =>
        <ItemGroup
          key={group.title}
          title={group.title}
          items={group.items}
          onItemClick={onItemClick}
        />)}
    </div>
  )
}