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

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


type AlertTypes = {
  className?: string,
  dismissable?: boolean,
  variant?: string,
  title?: string,
  children: ReactNode,
  [other:string]: unknown 
}

const ALERT: string = `
  border-l-4
  font-sans
  overflow-hidden
  p-4
  relative
  rounded-sm
  shadow-md
  transition-all
  duration-300
  ease-in-out
`

const RED: string = `
  bg-bscs-red-100
  border-bscs-red-800
  text-bscs-red-800
`

const YELLOW: string = `
  bg-bscs-yellow-200
  border-bscs-yellow-800
  text-bscs-yellow-800
`
const GREEN: string = `
  bg-bscs-green-100
  border-bscs-green-800
  text-bscs-green-800
`

const INDIGO: string = `
  bg-bscs-indigo-100
  border-bscs-indigo-800
  text-bscs-indigo-800
`

const RED_ICON: string = `
  fa-exclamation-circle
  fas
  mr-3
  text-base
`

const YELLOW_ICON: string = `
  fa-exclamation-triangle
  fas
  mr-3
  text-base
`

const GREEN_ICON: string = `
  fa-check-circle
  fas
  mr-3
  text-base
`

const INDIGO_ICON: string = `
  fa-info-circle
  fas
  mr-3
  text-base
`

const TEXT: string = `
  leading-tight
  mt-1
  text-base
  tracking-wider
`

const TITLE: string = `
  font-bold
  text-sm
  uppercase
`

const ICON_WRAPPER: string = `
  flex
  mr-2
`

const VARIANTS: Record<string, string> = {
  'green': GREEN,
  'indigo': INDIGO,
  'red': RED,
  'yellow': YELLOW
}

const ICON_VARIANTS: Record<string, string> = {
  'green': GREEN_ICON,
  'indigo': INDIGO_ICON,
  'red': RED_ICON,
  'yellow': YELLOW_ICON
}

const Alert:FC<AlertTypes> = ({
  className,
  children,
  dismissable,
  dismissAfter=5,  
  title,
  variant='indigo',
  ...other
}: AlertTypes) => {
  variant = variant.toLowerCase()

  const classList: string = formatClassList(
    appendVariantClasses(ALERT, VARIANTS, variant)
  )
  
  const iconClassList: string = formatClassList(
    appendVariantClasses('', ICON_VARIANTS, variant)
  )

  const textClassList: string = formatClassList(TEXT)
  const titleClassList: string = formatClassList(TITLE)
  const iconWrapperClassList: string = formatClassList(ICON_WRAPPER)
  
  return (
    <div
      className={classList}
      role="alert"
      {...other}
    >
      <div className={iconWrapperClassList}>
        <i className={iconClassList} />
        <div>
          {title &&
            <p className={titleClassList}>{title}</p>
          }
          <p className={textClassList}>
            {children}
          </p>
        </div>
      </div>
    </div>
  )
}

export default Alert