import React, { useState } from 'react';
import classNames from 'classnames';
import { Text, View, ScrollView } from '@tarojs/components';
import connect from '../connect';
import { CompDefault, MetaProps } from '../data-channel';

export interface Props extends MetaProps {
  // tabs数据列表
  items?: any[];
  // 数据输出通道
  onChange: Function;
}

export interface State {
  // 当前选中项id
  current: number | string;
}

const defaultValue: CompDefault<Props, State> = {
  props: {
    items: [
      { key: 0, name: '待评价', num: 10 },
      { key: 1, name: '待晒单', num: 2 },
      { key: 2, name: '已评价', num: 13 },
      { key: 3, name: '服务评价', num: 99 },
    ],
    onChange: (_value) => {},
  },
  state: {
    current: 0,
  },
  meta: {
    inputs: [{ key: 'items', keyMap: { id: 'key', name: 'name', num: 'num' } }],
    output: { tags: ['search-item'] },
  },
};

const TabsNumber: React.FC<Props> = ({ items, onChange, meta }) => {
  const [current, setCurrent] = useState(defaultValue.state.current);
  return (
    <View className='wm-tpl-tabs'>
      <ScrollView>
        <View className='container number'>
          {items.map((item) => {
            const keyMap = meta.inputs[0].keyMap;
            const id = item[keyMap.id];
            const active = current === id;
            return (
              <View
                key={id}
                className={classNames('tab', active && 'active')}
                onClick={() => {
                  setCurrent(id);
                  onChange({
                    value: id,
                    meta: meta?.output,
                  });
                }}>
                <Text className='num'>{item[keyMap.num]}</Text>
                <Text className='text'>{item[keyMap.name]}</Text>
                {active && <View className='line'></View>}
              </View>
            );
          })}
        </View>
      </ScrollView>
    </View>
  );
};

export default connect(TabsNumber, defaultValue);