import React from 'react'
import PropTypes from 'prop-types'
import theme from './theme.scss'
import moment from 'moment'
import RTDatePicker from 'react-toolbox/lib/date_picker'

class DatePicker extends React.Component {
  constructor () {
    super()
    this.customLocale = {
      id: {
        months: 'Januari_Februari_Maret_April_Mei_Juni_Juli_Agustus_September_Oktober_November_Desember'.split('_'),
        monthsShort: 'Jan_Feb_Mar_Apr_Mei_Jun_Jul_Agu_Sep_Okt_Nov_Des'.split('_'),
        weekdays: 'Minggu_Senin_Selasa_Rabu_Kamis_Jum\'at_Sabtu'.split('_'),
        weekdaysShort: 'Minggu_Senin_Selasa_Rabu_Kamis_Jum\'at_Sabtu'.split('_'),
        weekdaysLetter: 'M_S_S_R_K_J_S'.split('_')
      }
    }
  }

  getMonthText (month) {
    return moment().month(month).format('MMMM')
  }

  getMonthAbb (month) {
    return moment().month(month).format('MMM')
  }

  render () {
    let autoOk = true
    let inputFormat
    let props = {...this.props}
    if (props.inputFormat) {
      switch (props.inputFormat) {
        case 'monthShort':
          inputFormat = (value) => `${value.getDate()} ${this.getMonthAbb(value.getMonth())} ${value.getFullYear()}`
          break
        default:
          inputFormat = (value) => `${value.getDate()} ${this.getMonthText(value.getMonth())} ${value.getFullYear()}`
          break
      }
      delete props.inputFormat
    } else {
      inputFormat = (value) => `${value.getDate()} ${this.getMonthText(value.getMonth())} ${value.getFullYear()}`
    }
    let locale = this.customLocale.id
    let className = ''
    let inputClassName = ''
    if (props.accent || props.secondary) {
      className = theme.accent
      inputClassName = theme.accent
      delete props.accent
      delete props.secondary
    }
    if (props.shrink) {
      inputClassName += ' ' + theme.shrink
      delete props.shrink
    }
    if (props.className) {
      className += ' ' + props.className
      delete props.className
    }
    if (props.inputClassName) {
      inputClassName += ' ' + props.inputClassName
      delete props.inputClassName
    }
    if (props.locale && this.customLocale[props.locale]) {
      locale = this.customLocale[props.locale]
    }
    return (
      <RTDatePicker
        theme={theme}
        locale={locale}
        autoOk={autoOk}
        inputFormat={inputFormat}
        className={className}
        inputClassName={inputClassName}
        {...props}
      />
    )
  }
}

DatePicker.propTypes = {
  inputFormat: PropTypes.string
}

export default DatePicker