import React from "react"
import flatMap from "lodash/flatMap"
import some from "lodash/some"

interface IProps {
  menuData: IMenuItem
}

import * as styles from "./index.module.scss"
import MenuLink from "@/components/header/menu/menu-link"

const TwoColumnSubmenu: React.FC<IProps> = ({ menuData }) => {
  const isWider = some(
    flatMap(menuData.submenu, x => x.submenu),
    x => (x?.name.length ? x.name.length > 20 : false)
  )

  return (
    <div className={styles.twoColumnSubmenu}>
      <h5>
        <MenuLink link={menuData.link}>
          {menuData.name}
          <i className="iconfont icon-chevron_right_black_24dp" />
        </MenuLink>
      </h5>
      <ul>
        {menuData.submenu?.map(x => {
          return (
            <div
              key={x.name}
              className={styles.miniMenu}
              style={{ paddingRight: "1rem" }}
            >
              <MenuLink link={x.link}>
                <span className={styles.subtitle}>{x.name}</span>
              </MenuLink>
              <div>
                {x.submenu?.map(m => {
                  return (
                    <p
                      key={m.name}
                      className={styles.twoCItem}
                      style={{ minWidth: isWider ? "13.75rem" : 0 }}
                    >
                      <MenuLink link={m.link}>{m.name}</MenuLink>
                    </p>
                  )
                })}
              </div>
            </div>
          )
        })}
      </ul>
    </div>
  )
}

export default TwoColumnSubmenu