/**
 * 选择一个月的哪一天
 */
import React from 'react'
import Modal from 'antd-mobile/es/modal'
import { SingleMonth } from '../calendar'

export interface DayPickerProps {
  value?: number
  title?: string
  onChange?: (value: number) => void
  children: (value: number, onClick: () => void) => React.ReactNode
}

interface State {
  visible: boolean
  lastValue?: number
}

const month = new Date(2018, 9, 1)

export default class DayPicker extends React.PureComponent<DayPickerProps> {
  public static defaultProps = {
    title: '选择天数',
  }

  public state: State = {
    visible: false,
  }

  public render() {
    const { children, value = 1, title } = this.props
    const { visible } = this.state
    return (
      <>
        {children(value, this.handleShow)}
        <Modal
          transparent
          maskClosable={false}
          visible={!!visible}
          className="jm-date-picker"
          wrapClassName="jm-date-picker__wrapper"
        >
          <div className="jm-date-picker__header-bar">
            <div className="jm-date-picker__action" onClick={this.handleCancel}>
              取消
            </div>
            <div className="jm-date-picker__title">{title}</div>
            <div className="jm-date-picker__action" onClick={this.handleOk}>
              确定
            </div>
          </div>
          {this.renderCalendar()}
        </Modal>
      </>
    )
  }

  private renderCalendar() {
    const { value = 1 } = this.props
    return (
      <div className="jm-date-picker__body">
        <SingleMonth
          date={month}
          currentSelect={getValue(value)}
          onSelect={this.handleSelect}
          showHoliday={false}
          showLunar={false}
        />
      </div>
    )
  }

  private handleSelect = (date: Date) => {
    if (this.props.onChange) {
      this.props.onChange(date.getDate())
    }
  }

  private handleCancel = () => {
    this.setState({ visible: false })

    if (this.props.onChange) {
      this.props.onChange(this.state.lastValue!)
    }
  }

  private handleOk = () => {
    this.setState({ visible: false })
  }

  private handleShow = () => {
    this.setState({ visible: true, lastValue: this.props.value })
  }
}

const getValue = (value: number) => {
  const date = new Date(month)
  date.setDate(value)
  return date
}