import React from 'react'
import List from 'antd-mobile/es/list'
import YearPicker from '../year-picker'
import fecha from 'fecha'

export interface YearPickerItemProps {
  value?: Date
  onChange?: (value: Date) => void
  disabledBefore?: Date
  disabledAfter?: Date
  children?: React.ReactNode
  format?: string
}

const DefaultFormat = 'YYYY年'

export default class YearPickerItem extends React.Component<
  YearPickerItemProps
> {
  public render() {
    const { children, format, ...props } = this.props
    return (
      <YearPicker {...props}>
        {(date, onClick) => (
          <List.Item
            arrow="horizontal"
            extra={fecha.format(date, format || DefaultFormat)}
            onClick={onClick}
          >
            {children}
          </List.Item>
        )}
      </YearPicker>
    )
  }
}