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

export interface Props extends MetaProps {
  active: boolean;
  blocks: JSX.Element[];
  onChange?: Function;
}

export interface State {
  // 弹层过滤
  popFilter: {
    // 是否打开弹窗
    openFlag: boolean;
    // 过滤条件
    params: { [key: string]: any };
  };
}

const defaultValue: CompDefault<Props, State> = {
  props: {
    active: false,
    blocks: [],
    onChange: (_value) => {},
  },
  state: {
    popFilter: {
      openFlag: false,
      params: {},
    },
  },
  meta: {
    compName: 'tabPopFilter:弹层tab',
    output: {
      type: 'multi',
      children: [
        { tags: ['check-tab'] },
        { tags: ['cancel'] },
        { type: 'combine', tags: ['confirm'] },
      ],
    },
    inputs: [{ key: 'blocks', type: 'array', tags: ['jsx'] }],
  },
};

/**
 * 弹层tab
 */
const TabPopFilter: React.FC<Props> = ({ active, blocks, onChange, meta }) => {
  const [params, setParams] = useState(defaultValue.state.popFilter.params);
  const [openFlag, setOpenFlag] = useState(
    defaultValue.state.popFilter.openFlag,
  );

  blocks = blocks.map((block) => {
    // eslint-disable-next-line no-shadow
    bindOnChange(block, ({ value, meta }) => {
      // fixme const key = meta.key解析有问题，先都直接取meta.key
      if (params[meta.key]?.includes(value)) {
        params[meta.key] = params[meta.key].filter((i) => i !== value);
      } else if (params[meta.key]) {
        params[meta.key].push(value);
      } else {
        params[meta.key] = [value];
      }
      setParams({ ...params });
    });
    bindStateToProp(
      block,
      'selects',
      () => params[block.info.meta.output.key] || [],
    );
    return block;
  });

  return (
    <Fragment>
      <View
        className='wm-tabs-hub-item'
        onClick={() => {
          setOpenFlag(true);
          onChange({ meta: meta.output.children[0] });
        }}>
        <Text className={classNames('text', active && 'active')}>筛选</Text>
        <Image className='icon' src={active ? screenActive : screen} />
      </View>
      {openFlag && (
        <View
          className='pop-filter-modal'
          catchMove
          onTouchMove={(e) => {
            e.preventDefault();
          }}
          onClick={() => {
            setOpenFlag(false);
            onChange({ meta: meta.output.children[1] });
          }}>
          <View className='content' onClick={(e) => e.stopPropagation()}>
            {blocks}
            <View className='btn-box'>
              <View className='reset-btn' onClick={() => setParams({})}>
                重置
              </View>
              <View
                className='confirm-btn'
                onClick={() => {
                  setOpenFlag(false);
                  onChange({
                    value: params,
                    meta: meta.output.children[2],
                  });
                }}>
                确定
              </View>
            </View>
          </View>
        </View>
      )}
    </Fragment>
  );
};

export default connect(TabPopFilter, defaultValue);