import { styled } from 'styleh-components'
import Calendar from 'react-calendar'
import { Label } from 'atoms/Text'

const calendarAlignment = (item: string) => {
  switch (item) {
    case 'tl':
    case 'lt':
      return 'bottom: 100%; left: 0;'

    case 'tr':
    case 'rt':
      return 'bottom: 100%; right: 0;'

    case 'rb':
    case 'br':
      return 'top: 100%; right: 0;'

    case 'bl':
    case 'lb':
    default:
      return 'top: 100%; left: 0;'
  }
}

const PickerLabel = styled.withComponent(Label)`
  text-transform: capitalize;
  cursor: pointer;
  color: blue;
`

const DatePickerLabel = styled.withComponent(Label)``

const StyledCalendar = styled.withComponent(Calendar)`
  display: ${props => props.isShowCalendar ? 'block' : 'none'}

  ${props => props.align && styled.css`
    position: absolute;
    z-index: 9;
  `}
  ${props => props.align && calendarAlignment(props.align)};
`

const Wrapper = styled.section`
  position: relative;
`

export {
  PickerLabel,
  DatePickerLabel,
  StyledCalendar,
  Wrapper,
}