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

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


type TimelineItem = {
  children: ReactNode,
  className?: string,
  date: string,
  info: string,
  [other:string]: unknown
}

const CONTAINER: string = `
  flex
`
const LINE: string = `
  border-r-2
  border-gray-400
  border-solid
  absolute
  h-full
  top-0
  z-0
  mx-2
  border-2
`
const DOT: string = `
  bg-bscs-blue-900
  rounded-full
  h-5
  w-5
  justify-start
  z-10
  mt-2
`
const ARROW: string = `
  border-t-4
  border-l-4
  border-r-0
  border-b-0
  border-solid
  absolute
  origin-top-right
  transform
  -rotate-45
  ml-6
  p-3
  bg-bscs-gray-200
  -mr-12
  z-0
  border-bscs-gray-200
`
const ITEM: string = `
  flex-1
  bg-bscs-gray-200
  shadow-md
  rounded
  ml-6
  mb-6
  text-bscs-gray-900
  py-5
  px-6
  max-w-lg
  justify-start
  z-10
  border-t-8
  border-bscs-blue-900
`
const TITLE: string = `
  text-bscs-gray-800
  leading-tight
  text-2xl
  font-normal
  font-sans
  -mt-2
  pb-2
`
const INFO: string = `
  font-light
  font-sans
  tracking-wider
`

const Timeline:FC<TimelineItem> = ({
  children,
  className,
  date,
  info,
  ...other
}: TimelineItem ) => {
  const containerClassList = formatClassList(
    className
      ? joinStrings(' ', CONTAINER, className)
      : CONTAINER
  )

  const lineClassList = formatClassList(LINE)
  const dotClassList = formatClassList(DOT)
  const arrowClassList = formatClassList(ARROW)
  const itemClassList = formatClassList(ITEM)
  const titleClassList = formatClassList(TITLE)
  const infoClassList = formatClassList(INFO)

  return (
    <div className={containerClassList} {...other}>
      <div className={lineClassList} />
      <div className={dotClassList} />
      <div className={arrowClassList} />
      <div className={itemClassList}>
        <h3 className={titleClassList}>{date}</h3>
        <div className={infoClassList}>{children}</div>
      </div>
    </div>
  )
}

export default Timeline