import React, { useState, Fragment } from 'react';
import classNames from 'classnames';
import { View, Text, Image } from '@tarojs/components';
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';

export interface Props extends MetaProps {
  // 是否被选中
  active: boolean;
  // 数据输出通道
  onChange?: Function;
}

export interface State {
  // 下拉筛选
  expand: {
    // 筛选项列表
    items: any[];
    // 当前选中的项
    selectId: number;
    // 打开状态
    openFlag: boolean;
  };
}

const defaultValue: CompDefault<Props, State> = {
  props: {
    active: false,
    onChange: (_value) => {},
  },
  state: {
    expand: {
      items: [
        { id: 0, name: '综合' },
        { id: 1, name: '最新' },
        { id: 2, name: '评论' },
      ],
      selectId: 0,
      openFlag: false,
    },
  },
  meta: {
    compName: 'tabExpand:下拉tab',
    output: {
      type: 'multi',
      children: [{ tags: ['check-tab'] }, { tags: ['search-item'] }],
    },
    __mergeCb: (props, meta) => {
      meta.output.children[1].key = props.filterKey;
    },
  },
};

/**
 * 下拉tab
 */
const TabExpand: React.FC<Props> = ({ active, onChange, meta }) => {
  const [items] = useState(defaultValue.state.expand.items);
  let [openFlag, setOpenFlag] = useState(defaultValue.state.expand.openFlag);
  let [selectId, setSelectId] = useState(defaultValue.state.expand.selectId);

  openFlag = active && openFlag;

  return (
    <Fragment>
      <View
        className='wm-tabs-hub-item'
        onClick={() => {
          setOpenFlag(!openFlag);
          onChange({ meta: meta.output.children[0] });
        }}>
        <Text className={classNames('text', active && 'active')}>
          {items[selectId].name}
        </Text>
        <Image
          className={classNames('icon', openFlag && 'expand')}
          src={openFlag || active ? arrowUp : arrowDown}
        />
      </View>
      {openFlag && (
        <View className='expand-modal' onClick={() => setOpenFlag(false)}>
          <View className='expand-content' onClick={(e) => e.stopPropagation()}>
            {items.map((item) => {
              const itemStyle = classNames(
                'item',
                item.id === selectId && 'active',
              );
              return (
                <View
                  className={itemStyle}
                  key={item.id}
                  onClick={() => {
                    setSelectId(item.id);
                    setOpenFlag(false);
                    onChange({ value: item.id, meta: meta.output.children[1] });
                  }}>
                  {item.name}
                </View>
              );
            })}
            <View style={{ width: '100%', height: '100%' }} />
          </View>
        </View>
      )}
    </Fragment>
  );
};

export default connect(TabExpand, defaultValue);