import React, { useEffect, useState } from 'react';
import { ScrollView, Text, View, Image } from '@tarojs/components';
import classNames from 'classnames';
const arrowUp = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/screen/icon-arrow-up.png';
const arrowDown = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/screen/icon-arrow-down.png';
import connect from '../connect';
import { CompDefault, MetaProps } from '../data-channel';
import fetchMock from '../../common/fetch-mock';

export interface Props extends MetaProps {
  // 数据url
  url: string;
  // 数据输出通道
  onChange: Function;
}

export interface State {
  // 下拉打开状态
  expandFlag: boolean;
  // 当前项id
  current: string | number;
  // tabs列表
  items: any[];
}

const defaultValue: CompDefault<Props, State> = {
  props: {
    url: '/xxx-list',
    onChange: (_value) => {},
  },
  state: {
    current: 0,
    items: [],
    expandFlag: false,
  },
  meta: {
    inners: [{ key: 'items', keyMap: { id: 'id', name: 'title' } }],
  },
};

/**
 * 下拉tabs
 */
const TabsExpand: React.FC<Props> = ({ url, onChange, meta }) => {
  let [expandFlag, setExpandFlag] = useState(defaultValue.state.expandFlag);
  const [current, setCurrent] = useState(defaultValue.state.current);
  const [items, setItems] = useState(defaultValue.state.items);
  const [currentKey, setCurrentKey] = useState('key1');

  useEffect(() => {
    (async () => {
      const dataList = await fetchMock.fetchList('', {});
      setItems(dataList);
    })();
  }, [url]);

  const expandStyle = classNames(
    'expandIcon',
    'expandIconExpand',
    expandFlag && 'selected',
  );

  return (
    <View className='wm-tpl-tabs'>
      <ScrollView scrollX scrollIntoView={currentKey} scrollWithAnimation>
        <View className='container expand'>
          {items.map((item) => {
            const keyMap = meta.inners[0].keyMap;
            const id = item[keyMap.id];
            const active = current === id;
            return (
              <View
                id={`key${id}`}
                key={id}
                className={classNames('tab', active && 'scroll-active active')}
                onClick={() => {
                  setCurrent(id);
                  onChange({
                    value: id,
                    meta: meta?.output,
                  });
                  setExpandFlag(false);
                }}>
                <Text className='text'>{item[keyMap.name]}</Text>
              </View>
            );
          })}
        </View>
      </ScrollView>
      <View className='right-linear' />
      <View className={expandStyle} onClick={() => setExpandFlag(!expandFlag)}>
        <Text className='more'>全部</Text>
        <Image className='icon' src={!expandFlag ? arrowDown : arrowUp} />
      </View>
      {expandFlag && (
        <View className='cate-mask'>
          <View className='cate-box'>
            <View className='cate-content'>
              <View className='cate-list'>
                {items.map((item) => {
                  const keyMap = meta.inners[0].keyMap;
                  const id = item[keyMap.id];
                  const active = current === id;
                  return (
                    <View
                      key={id}
                      className={classNames(
                        'cate-item',
                        active && 'cate-item-active',
                      )}
                      onClick={() => {
                        setCurrentKey(`key${id}`);
                        setCurrent(id);
                        setExpandFlag(false);
                        onChange({
                          value: id,
                          meta: meta?.output,
                        });
                      }}>
                      <Text>{item[keyMap.name]}</Text>
                    </View>
                  );
                })}
              </View>
            </View>
            <View
              className='cate-bottom'
              onClick={() => setExpandFlag(false)}
            />
          </View>
        </View>
      )}
    </View>
  );
};

export default connect(TabsExpand, defaultValue);