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'
import { ChineseWeekDay } from '../calendar'

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

interface State {
  visible: boolean
  lastValue?: number
}

const list: number[] = []
for (let i = 0; i < 7; i++) {
  list.push(i)
}

export default class WeekDayPicker extends React.PureComponent<
  WeekDatePickerProps
> {
  public static defaultProps = {
    title: '选择星期',
  }

  public state: State = {
    visible: false,
  }

  public render() {
    const { children, value = 0, 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>
          <MultiPicker
            className="jm-date-picker__body"
            selectedValue={[value]}
            onValueChange={this.handleSelectChange}
          >
            <Picker className="jm-date-picker__date">
              {list.map(i => (
                <Picker.Item value={i} key={i}>
                  星期 {ChineseWeekDay[i]}
                </Picker.Item>
              ))}
            </Picker>
          </MultiPicker>
        </Modal>
      </>
    )
  }

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

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

  private handleCancel = () => {
    this.setState({ visible: false })
    if (this.props.onChange) {
      this.props.onChange(this.state.lastValue!)
    }
  }

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