import React, { FC } from 'react'

import { formatClassList, joinStrings } from '../../utils'


interface Items {
  description: string,
  icon: string,
  title: string
}

type DropdownTypes = {
  className?: string,
  items: Items[],
  other?: unknown
}

const ROW_WRAPPER: string = `
  bg-white
  flex
  flex-col
  flex-wrap
  h-32
  p-2
  mb-8
  w-72
`
const COLUMN_WRAPPER: string = `
  bg-white
  flex
  flex-col
  flex-wrap
  h-56
  p-2
  w-72
`
const TITLE: string = `
  font-sans
  text-base
  text-bscs-gray-1000
  text-left
`
const DESCRIPTION: string = `
  font-sans
  mt-2
  text-bscs-gray-600
  text-left
  text-sm
`
const DESCRIPTION_BOX: string = `
  cursor-pointer
  hover:bg-bscs-gray-100
  p-6
  w-72
`
const ICON: string = `
  text-bscs-indigo-600
`

const Dropdown:FC<DropdownTypes> = ({
  className,
  items,
  ...other
}: DropdownTypes) => {
  const descriptionBox: string = formatClassList(DESCRIPTION_BOX)
  const formattedColumnWrapper: string = formatClassList(COLUMN_WRAPPER)
  const formattedDescription: string = formatClassList(DESCRIPTION)
  const formattedRowWrapper: string = formatClassList(ROW_WRAPPER)
  const formattedTitle: string = formatClassList(TITLE)
  const formattedIcon: string = formatClassList(ICON)

  return (
    <>
      {
        items.length <= 3
        ?
          <div
            className={formattedRowWrapper}
            {...other}
          >
            {
              items.map((item, index) => (
                <div className="flex" key={index}>
                  <div
                    className={descriptionBox}
                  >
                    <div className={formattedTitle}>
                      <i className={joinStrings(' ', item.icon, formattedIcon)}></i>&nbsp;&nbsp;{item.title}
                    </div>
                    <div className={formattedDescription} >
                      {item.description}
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        :
          <div
            className={formattedColumnWrapper}
            {...other}
          >
            {
              items.map((item, index) => (
                <div className="flex" key={index}>
                  <div
                    className={descriptionBox}
                  >
                    <div className={formattedTitle}>
                      <i className={joinStrings(' ', item.icon, formattedIcon)}></i>&nbsp;&nbsp;{item.title}
                    </div>
                    <div className={formattedDescription} >
                      {item.description}
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
      }
    </>
  )
}

export default Dropdown