import React, { useState } from 'react';
import classNames from 'classnames';
import { Image, Text, View } from '@tarojs/components';
const sortDown = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/screen/icon-price-down.png';
const sortUp = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/screen/icon-price-up.png';
const sort = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/screen/icon-price.png';
import { CompDefault, MetaProps } from '../data-channel';
import connect from '../connect';

export interface Props extends MetaProps {
  active: boolean;
  onChange?: Function;
}

export interface State {
  // 排序状态
  sortFlag: boolean;
}

const defaultValue: CompDefault<Props, State> = {
  props: {
    active: false,
    onChange: (_value) => {},
  },
  state: {
    sortFlag: false,
  },
  meta: {
    output: { tags: ['check-tab', 'search-item'] },
    __mergeCb: (props, meta) => {
      meta.output.key = props.filterKey;
    },
  },
};

/**
 * 排序tab
 */
const TabSort: React.FC<Props> = ({ onChange, active, meta }) => {
  const [flag, setFlag] = useState(defaultValue.state.sortFlag);
  let iconSrc = active ? (flag ? sortDown : sortUp) : sort;

  return (
    <View
      className='wm-tabs-hub-item'
      onClick={() => {
        setFlag(!flag);
        // fixme 这边value先写死
        onChange({ value: flag ? 1 : 0, meta: meta.output });
      }}>
      <Text className={classNames('text', active && 'active')}>价格</Text>
      <Image className='icon' src={iconSrc} />
    </View>
  );
};

export default connect(TabSort, defaultValue);