import React from 'react'
import { Empty } from 'atoms/Empty'
import {
  CalendarProps,
  CalendarState,
} from './typings'
import {
  PickerLabel,
  DatePickerLabel,
  StyledCalendar,
  Wrapper,
} from './styled'

function defaultRenderBox(props: CalendarProps, state?: CalendarState) {
  const { onChange, dateFormat, align, pickerLabel, isPicker, isDatePickerLabel } = props
  const defaultDateView = (date) => {
    state.dateView(date, isPicker, dateFormat)
  }
  const showCalendarView = (event) => state.calendarView(props)

  const defaultDateViewEvent = onChange ? onChange : defaultDateView

  const calendar = <StyledCalendar onChange={defaultDateViewEvent} isShowCalendar={state.isShowCalendar} align={align} />

  const datePickerLabelItems = () => {
    if (isPicker) {
      return <PickerLabel onClick={showCalendarView}>{pickerLabel}</PickerLabel>
    } else {
      if (isDatePickerLabel) {
        return <DatePickerLabel>{state.dateItem.toString()}</DatePickerLabel>
      } else {
        return <Empty />
      }
    }
  }

  return (
    <React.Fragment>
      {datePickerLabelItems()}
      {calendar}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: CalendarProps, state?: CalendarState) {
  const { className, children, align } = props
  const passthroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passthroughProps} align={align}>{children}</Wrapper>
}

export {
  defaultRenderBox,
  defaultRenderWrapper,
}