import React, { FC } from 'react'

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

import Button from '../button'

import './loading.css'


type LoadingProps = {
  button?: boolean,
  variant: string,
  size?: string,
  [other:string]: unknown
}

const LOADING: string = `
  inline-block
  loading
  rounded-full
`

const BLUE: string = `bg-bscs-blue-800`
const GREEN: string = `bg-bscs-green-800`
const INDIGO: string = `bg-bscs-indigo-800`
const ORANGE: string = `bg-bscs-orange-800`
const RED: string = `bg-bscs-red-800`
const VIOLET: string = `bg-bscs-violet-800`
const YELLOW: string = `bg-bscs-yellow-800`

const VARIANTS: Record<string,string> = {
  blue: BLUE,
  green: GREEN,
  indigo: INDIGO,
  orange: ORANGE,
  red: RED,
  violet: VIOLET,
  yellow: YELLOW
}

const Loading: FC<LoadingProps> = ({
  button,
  size="2rem",
  variant="indigo",
  ...other
}: LoadingProps) => {
  variant = variant.toLowerCase()

  const classList: string = formatClassList(
    appendVariantClasses(LOADING, VARIANTS, variant)
  )

  if (button) {
    return (
      <Button
        variant={`outline-${variant}`}
        {...other}
      >
        <span
          className={classList}
          style={{ height: size, width: size }}
        />
      </Button>
    )
  }
  
  return (
    <div
      {...other}
    >
      <span
        className={classList}
        style={{ height: size, width: size }}
      />
    </div>
  )
}

export default Loading