import React, {
  FC,
  MouseEvent,
} from 'react'

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


type SelectCardTypes = {
  className?: string,
  cardData: CardTypes,
  other?: unknown,
  selected: boolean,
  setSelected: (select: boolean) => void
}

type CardTypes = {
  id: string,
  title: string,
  description: string,
  price: string
}

const SELECTCARDBUTTON: string = `
  focus:shadow-outline
  outline-none
  rounded-lg
  rounded-lg
  select-card-button
  shadow-md
  text-left
`
const SELECT: string = `
  bg-white
  border-2
  border-transparent
  flex
  flex-col
  flex-grow
  h-40
  hover:border-bscs-indigo-500
  hover:duration-300
  hover:ease-in-out
  hover:transition-all
  outline-none
  px-3
  py-2
  w-40
`
const SELECTED: string = `
  bg-white
  border-2
  border-bscs-green-500
  border-solid
  flex
  flex-col
  flex-grow
  h-40
  px-3
  py-2
  w-40
`
const ICON: string = `
  checked-square
  fa-check-circle
  fas
  text-2xl
  text-bscs-green-500
`
const UNCHECKED: string = `
  border-2
  border-bscs-gray-200
  checked-square
  float-right
  rounded-full
  unchecked
`
const HEADING: string = `
  font-bold
  mb-2
  text-bscs-gray-500
  text-xs
`
const DESCRIPTION: string = `
  flex-grow
  mt-1
  self-center
  text-bscs-gray-1000
`
const PRICE: string = `
  text-bscs-gray-700
  text-xs
`

const handleClick = (
  e: MouseEvent,
  selected: boolean,
  setSelected: (select: boolean) => void
): void => {
  e.preventDefault()

  setSelected(!selected)
}

const SelectCard:FC<SelectCardTypes> = ({
  className,
  cardData,
  selected,
  setSelected,
}: SelectCardTypes) => {
  const selectClassList = formatClassList(
    className
      ? joinStrings(' ', SELECT, className)
      : SELECT
  )
  const selectCardButtonClassList = formatClassList(SELECTCARDBUTTON)
  const selectedClassList = formatClassList(SELECTED)
  const iconClassList = formatClassList(ICON)
  const headingClassList = formatClassList(HEADING)
  const descriptionClassList = formatClassList(DESCRIPTION)
  const priceClassList = formatClassList(PRICE)
  const uncheckedClassList = formatClassList(UNCHECKED)

  return (
    <button
      // aria-selected={selected}
      className={
        selected
          ? joinStrings(' ', selectCardButtonClassList, selectedClassList)
          : joinStrings(' ', selectCardButtonClassList, selectClassList)
      }
      onClick={(e: MouseEvent) => handleClick(e, selected, setSelected)}
      tabIndex={0}
    >
      <div>
        <div
          className='pr-2 float-left block'
          style={{
            width: '105px'
          }}
        >
          <h2
            className={headingClassList}
          >
            {cardData.title}
          </h2>
        </div>
        {
          selected
            ? <div className='float-right block checked-square'>
                <i className={iconClassList} ></i>
              </div>
            : <div className={uncheckedClassList} ></div>
        }
      </div>
      <p
        className={descriptionClassList}>
        {cardData.description}
      </p>
      <p className={priceClassList}>
        $<b>{cardData.price}</b> / Individual
      </p>
    </button>
  )
}

export default SelectCard