import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { CalendarProps, CalendarState } from './typings'
import { CalendarStateInstance } from './State'
import {
  defaultRenderBox,
  defaultRenderWrapper,
} from './renderProps'

function toCalendarState(props: CalendarProps) {
  if (props.state === undefined) {
    return new CalendarStateInstance()
  } else {
    return props.state
  }
}

@observer
class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
  static defaultProps = {
    className: '',
    dateItem: new Date(),
    isShowCalendar: false,
    isPicker: false,
    isDatePickerLabel: false,
    align: '',
    dateFormat: 'MM DD, YYYY',
    pickerLabel: 'date picker',

    renderWrapper: defaultRenderWrapper,
  }

  componentWillMount() {
    this.observableState.dateItem = this.props.dateItem
    this.observableState.isShowCalendar = this.props.isShowCalendar
  }

  observableState: CalendarState = toCalendarState(this.props)

  render() {
    const { renderWrapper, ...remainingProps } = this.props
    const children = defaultRenderBox(remainingProps, this.observableState)
    const view = renderWrapper({ children, ...remainingProps }, this.observableState)
    return view
  }
}

export { Calendar, toCalendarState }
export default Calendar