import React from 'react'
import MultiPicker from '@gdjiami/rmc-picker/es/MultiPicker'
import Picker from '@gdjiami/rmc-picker/es/Picker'
import Modal from 'antd-mobile/es/modal'

export type MonthDayPickerValue = [number, number]
export interface MonthDayPickerProps {
  value?: MonthDayPickerValue
  title?: string
  onChange?: (value: MonthDayPickerValue) => void
  children: (value: MonthDayPickerValue, onClick: () => void) => React.ReactNode
}

interface State {
  visible: boolean
  lastValue?: MonthDayPickerValue
}

const monthList: number[] = []
for (let i = 1; i <= 12; i++) {
  monthList.push(i)
}
const dayList = genMonthList()

export default class MonthDayPicker extends React.PureComponent<
  MonthDayPickerProps
> {
  public static defaultProps = {
    title: '选择月份',
  }

  public state: State = {
    visible: false,
  }

  public render() {
    const {
      children,
      title,
      value = [1, 1] as MonthDayPickerValue,
    } = 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>
          <MultiPicker
            className="jm-date-picker__body"
            selectedValue={value}
            onValueChange={this.handleSelectChange}
          >
            <Picker className="jm-date-picker__date">
              {monthList.map(i => (
                <Picker.Item value={i} key={i}>
                  {i}月
                </Picker.Item>
              ))}
            </Picker>
            <Picker className="jm-date-picker__date">
              {dayList[value[0]].map(i => (
                <Picker.Item value={i} key={i}>
                  {i}日
                </Picker.Item>
              ))}
            </Picker>
          </MultiPicker>
        </Modal>
      </>
    )
  }

  private handleSelectChange = ([month, day]: [number, number]) => {
    if (this.props.onChange) {
      this.props.onChange([month, day])
    }
  }

  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 })
  }
}

function genMonthList() {
  const list: { [key: string]: number[] } = {}
  const date = new Date()
  for (let i = 0; i < 12; i++) {
    date.setMonth(i + 1)
    date.setDate(0)
    const end = date.getDate()
    date.setDate(1)
    const dayList: number[] = (list[i + 1] = [])
    for (let j = 1; j <= end; j++) {
      dayList.push(j)
    }
  }
  return list
}