import { BfPickerView, BfPickerViewColumn } from '@bud-fe/react-taro-ui';
import type { IBfPickerViewProps } from '@bud-fe/react-taro-ui/es/components/bf-picker-view';
import { View } from '@tarojs/components';
import { useState } from 'react';
import styles from './index.module.less';

export default function PickerViewDemo() {
  const [value, setValue] = useState([1, 2]);

  // 生成年份数据
  const years = Array.from({ length: 50 }, (_, i) => (2000 + i).toString());

  // 生成月份数据
  const months = Array.from({ length: 12 }, (_, i) => (i + 1).toString());

  // 处理值变化
  const handleOnChange: IBfPickerViewProps['onChange'] = (e) => {
    console.log('PickerView onChange', e.detail.value);
    setValue(e.detail.value);
  };

  return (
    <View className={styles['page-picker-view-demo']}>
      <View className={styles['title']}>PickerView 组件示例</View>

      <View className={styles['picker-container']}>
        <BfPickerView
          style={{ height: 200 }}
          value={value}
          onChange={handleOnChange}
          onPickStart={() => console.log('PickerView onPickStart')}
          onPickEnd={() => console.log('PickerView onPickEnd')}
        >
          <BfPickerViewColumn>
            {years.map((item) => (
              <View style={{ color: 'tomato' }} key={`year-${item}`} data-value={item}>
                {item}年
              </View>
            ))}
          </BfPickerViewColumn>
          <BfPickerViewColumn>
            {months.map((item) => (
              <View style={{ color: 'steelblue' }} key={`month-${item}`} data-value={item}>
                {item}月
              </View>
            ))}
          </BfPickerViewColumn>
        </BfPickerView>
      </View>

      <View className={styles['result']}>
        当前选择: {years[value[0]]}年{months[value[1]]}月
      </View>
    </View>
  );
}