import { Stack, StackProps, Select, SelectProps } from '@tidbcloud/uikit'
import { useState } from 'react'

import dayjs from 'dbaas/components/dayjs'

interface IProps extends StackProps {
  label?: string
  minDate: dayjs.Dayjs
  maxDate: dayjs.Dayjs
  onDateChange: (year: number, month: number) => void
}

export default ({ minDate, maxDate, onDateChange, label, ...rest }: IProps) => {
  const [selDate, setSelDate] = useState(maxDate.format('YYYY-MM'))
  const maxDateStamp = maxDate.valueOf()

  const monthOptions: { key: string; value: string; label: string }[] = []

  // include minDate and maxDate
  let currentDate = minDate
  for (let i = 0; currentDate.valueOf() <= maxDateStamp; i++) {
    monthOptions.push({
      key: currentDate.format('YYYY-MM'),
      value: currentDate.format('YYYY-MM'),
      label: currentDate.format('MMMM YYYY')
    })
    currentDate = currentDate.add(1, 'M')
  }

  const handleMonthChange: SelectProps['onChange'] = (value) => {
    setSelDate(value || '')
    const arr = (value || '').split('-')
    const year = Number(arr[0] || '')
    const month = Number(arr[1] || '')
    onDateChange(year, month)
  }

  return (
    <Stack {...rest}>
      {!!label && <label>{label}</label>}
      <Select data={monthOptions.reverse()} value={selDate} w={'100%'} onChange={handleMonthChange} />
    </Stack>
  )
}