import { observable, action } from 'xmobx/mobx'
import { CalendarProps, CalendarState, DateConstructor } from './typings'
import { format } from 'date-fns'

function convertDateFormat(item: CalendarProps, dateFormat?: string) {
  const dateToString = item.toString()
  const dateFormatter = format(new Date(dateToString), dateFormat)
  return dateFormatter
}

class CalendarStateInstance implements CalendarState {
  @observable dateItem: DateConstructor
  @observable isShowCalendar: DateConstructor

  @action.bound
  dateView(props: CalendarProps, isPicker?: boolean, dateFormat?: string) {
    this.dateItem = convertDateFormat(props, dateFormat)
    if (isPicker) {
      this.isShowCalendar = !this.isShowCalendar
    }
  }

  @action.bound
  calendarView(props: CalendarProps) {
    this.isShowCalendar = !this.isShowCalendar
  }
}

export { CalendarStateInstance, convertDateFormat }