import { BfEditableList, BfListItem } from '@bud-fe/react-taro-ui';
import { Button, Text, View } from '@tarojs/components';
import React, { useState } from 'react';
import IconFont from '../../components/icon-font';
import styles from './index.module.less';

type TItem = {
  name: string;
  age: string;
};

export default () => {
  const [list, setList] = useState<TItem[]>([
    { name: '萨卡', age: '22' },
    { name: '史密斯罗', age: '22' },
  ]);
  const [customList, setCustomList] = useState<TItem[]>([
    { name: '厄德高', age: '23' },
    { name: '热苏斯', age: '25' },
  ]);

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfEditableList<TItem>
        creatorRecord={{ name: '张三', age: '30' }}
        max={3}
        creatorButton="添加人员"
        data={list}
        onDataChange={(data) => setList(data)}
      >
        {(item: TItem, index: number) => (
          <>
            <BfListItem className={styles['list-item']} label={item.name} arrow />
            <BfListItem
              className={styles['list-item']}
              label={item.age}
              arrow
              onClick={() => {
                setList((pre) => {
                  pre[index].age = Math.random() + '';
                  return [...pre];
                });
              }}
            />
          </>
        )}
      </BfEditableList>

      <View className="group-title">自定义删除、添加按钮</View>
      <BfEditableList<TItem>
        creatorRecord={{ name: '李四', age: '20' }}
        max={4}
        creatorButton="添加人员"
        data={customList}
        hideRemoveIcon
        creatorButton={({ add }) => (
          <Button
            onClick={() => {
              add({ name: 'customName', age: 100 });
            }}
          >
            custom add
          </Button>
        )}
        onDataChange={(data) => setCustomList(data)}
      >
        {(item: TItem, index: number, _id: string, { remove }) => (
          <>
            <View className={styles['custom-list-item']}>
              <IconFont type="icon-shanshu" className={styles['icon-delete']} onClick={() => remove(_id)} />
              <Text>{item.name}</Text>
            </View>
            <BfListItem
              className={styles['list-item']}
              label={item.age}
              arrow
              onClick={() => {
                setCustomList((pre) => {
                  pre[index].age = Math.random() + '';
                  return [...pre];
                });
              }}
            />
          </>
        )}
      </BfEditableList>
    </>
  );
};