import { BfModalSearchPicker } from '@bud-fe/react-taro-ui';
import { Button, View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [isOpened, setIsOpened] = useState(false);
  const [isStaticOpened, setIsStaticOpened] = useState(false);
  const [isCustomHeaderOpened, setIsCustomHeaderOpened] = useState(false);

  return (
    <>
      <Button className="group-title" onClick={() => setIsOpened(true)}>
        基础用法
      </Button>
      <Button className="group-title" onClick={() => setIsStaticOpened(true)}>
        options + confirmDisable=true
      </Button>
      <Button className="group-title" onClick={() => setIsCustomHeaderOpened(true)}>
        自定义头部（会替换掉默认的searchBar）
      </Button>

      <BfModalSearchPicker
        isOpened={isOpened}
        searchBarProps={{ searchBtn: true }}
        tapConfirmToSearch
        searchHistoryKey="a"
        // multiple
        // value={[1, 3, 4]}
        value={1}
        title="选择商品"
        placeholder="请输入商品名称"
        params={{ test: 'a' }}
        request={async (params) => {
          console.log('request params', params);
          return Array.from({ length: 20 }, (_, index) => ({
            label: `百威纯生 500ml 大听(${index})`,
            value: index,
          }));
        }}
        onCancel={() => {
          console.log('onCancel');
          setIsOpened(false);
        }}
        onConfirm={(v) => {
          console.log('onConfirm', v);
          setIsOpened(false);
        }}
      />
      <BfModalSearchPicker
        isOpened={isStaticOpened}
        title="选择商品"
        placeholder="请输入商品名称"
        value={3}
        options={[
          { name: '111', id: 1 },
          { name: '222', id: 2 },
          { name: '333', id: 3 },
        ]}
        fieldNames={{ label: 'name', value: 'id' }}
        confirmDisable
        onCancel={() => {
          console.log('onCancel');
          setIsStaticOpened(false);
        }}
        onConfirm={(v) => {
          console.log('onConfirm', v);
          setIsStaticOpened(false);
        }}
      />
      <BfModalSearchPicker
        isOpened={isCustomHeaderOpened}
        title="选择商品"
        placeholder="请输入商品名称"
        value={2}
        header={<View>以下为完美门店联系人列表，可选择一位成为BEES项目关键人</View>}
        request={async (params) => {
          console.log('request params', params);
          return Array.from({ length: 20 }, (_, index) => ({
            label: `百威纯生 500ml 大听(${index})`,
            value: index,
          }));
        }}
        onCancel={() => {
          console.log('onCancel');
          setIsCustomHeaderOpened(false);
        }}
        onConfirm={(v) => {
          console.log('onConfirm', v);
          setIsCustomHeaderOpened(false);
        }}
      />
    </>
  );
};