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

const Calendar = props => <div {...props}>fixme</div>

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 }