import { BfModalPicker } from '@bud-fe/react-taro-ui';
import { Button, View } from '@tarojs/components';
import React, { useState } from 'react';
import styles from './index.module.less';

const mockData = [
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 },
  { label: '选项4', value: 4 },
  { label: '选项5', value: 5 },
];

const mockData1 = [
  { name: '选项1', code: 1 },
  { name: '选项2', code: 2 },
  { name: '选项3', code: 3 },
  { name: '选项4', code: 4 },
];

export default () => {
  const [isOpened, setIsOpened] = useState(false);
  const [isOpened2, setIsOpened2] = useState(false);

  return (
    <>
      <Button className="group-title" onClick={() => setIsOpened(true)}>
        基础用法
      </Button>

      <BfModalPicker
        isOpened={isOpened}
        data={mockData}
        onCancel={() => {
          console.log('onCancel');
          setIsOpened(false);
        }}
        onConfirm={(key, value) => {
          console.log('onConfirm', { key, value });
          setIsOpened(false);
        }}
        position="top"
      />

      <Button className="group-title" onClick={() => setIsOpened2(true)}>
        自定义渲染
      </Button>

      <BfModalPicker
        isOpened={isOpened2}
        data={mockData1}
        fieldNames={{ label: 'name', value: 'code' }}
        indicatorClass={styles['indicatorClass']}
        onCancel={() => {
          console.log('onCancel');
          setIsOpened2(false);
        }}
        onConfirm={(key, value) => {
          console.log('onConfirm', { key, value });
          setIsOpened2(false);
        }}
        renderItem={(item, isCurrent) => {
          return (
            <View className={isCurrent ? styles['selected2'] : ''} key={item.value}>
              你好 {item.label}
            </View>
          );
        }}
      />
    </>
  );
};