import React, { useState, useEffect, useRef } from 'react';
import { Icon } from '@alifd/next';
import { Form } from '@alifd/meet-react';
import cn from 'classnames';
import MobileDrawer from './MobileDrawer';
import FixFooterContainer from './FixFooterContainer';
import './index.scss';

const FormItem = Form.Item;

const hasClearProps = (element) => {
  const comps = ['Input', 'Select', 'CascaderSelect'];
  return comps.includes(element?.type?.name || element?.type?.render?.name);
};

/**
 * filter中drawer的显示和影藏通过css控制
 * @param props
 * @returns
 */
function Filter(props) {
  const { field, filterBar, search } = props;
  const { submit, reset } = search;
  const [visibleClass, setVisibleClass] = useState('');
  const modalRef = useRef(null);

  const splitFilter = (filter) => {
    let result: { quickFilters: any[]; filters: any[] } = {
      quickFilters: [],
      filters: [],
    };
    if (!filter) return result;
    result.filters = filter.filter((item) => {
      const { quick, children } = item;
      // if (quick && children.type?.render?.name === 'Select') {
      if (quick) {
        // 目前只支持select快速选择
        result.quickFilters.push(item);
      } else {
        return true;
      }
    });
    return result;
  };

  const hideDrawer = () => {
    setVisibleClass('');
    document.body.style.overflow = '';
  };
  const showDrawer = () => {
    setVisibleClass('show');
    document.body.style.overflow = 'hidden';
  };

  useEffect(() => {
    hideDrawer();
    if (modalRef) {
      // 因为filter的抽屉是常开的模式，只是通过css来控制影藏和显示，而meet-react的modal是根据mt-modal-mask--active的class类，来关闭多个蒙层的， 这里做了个兼容， 后面再想想有没有更好的办法
      //@ts-ignore
      modalRef?.current?.firstElementChild?.classList?.remove('mt-modal-mask--active');
    }
  }, []);

  const onSubmit = (e) => {
    field.validate(({ errors, values }) => {
      if (errors) return;
      submit && submit(e);
      hideDrawer();
    });
  };

  const onReset = (e) => {
    reset && reset(e);
  };

  const { quickFilters, filters } = splitFilter(filterBar);

  const renderQuickFilter = (quickFilter) => {
    return (
      <>
        {quickFilter.map((item) => {
          const { name, defaultValue, children } = item;
          const childArray = React.Children.toArray(children);
          const fieldProps = field.init(name, { initValue: defaultValue });
          const { onChange, ...more } = fieldProps;
          return childArray.length === 1
            ? React.cloneElement(children, {
                ...more,
                onChange: (value, actionType, item) => {
                  // 先执行field change
                  onChange(value, actionType, item);
                  // 快捷过滤，每次change都会请求数据
                  onSubmit(null);
                },
              })
            : children;
        })}
      </>
    );
  };

  return (
    <div className="oc-filter-inset">
      <div className="oc-quick-select">{renderQuickFilter(quickFilters)}</div>
      <div className="oc-filter-trigger" onClick={showDrawer}>
        <span>筛选</span>
        <Icon type="filter" size="small" />
      </div>
      <MobileDrawer
        className="oc-filter-drawer"
        visible={true}
        rootClassName={cn('oc-filter-root-drawer', visibleClass)}
        ref={modalRef}
        title="筛选"
        placement="right"
        onClose={hideDrawer}
      >
        <div className="oc-filter-drawer-container">
          <Form field={field} labelAlign="inset" contentAlign="right">
            {filters.map((filter) => {
              const { children, quick = false, ...more } = filter;
              const childArray = React.Children.toArray(children);
              const extraProps: { hasClear?: boolean } = {};
              if (hasClearProps(children)) {
                extraProps.hasClear = true;
              }
              return (
                <FormItem {...more} contentAlign="right" key={filter.name}>
                  {childArray.length === 1
                    ? React.cloneElement(children, {
                        name: filter.name, // meet-react的formitem没有name属性，自己实现一层
                        defaultValue: filter.defaultValue,
                        ...extraProps,
                      })
                    : children}
                </FormItem>
              );
            })}

            <FixFooterContainer fixed={visibleClass ? true : false}>
              <div className="oc-filter-drawer-footer">
                <Form.Reset size="large" onClick={onReset}>
                  <Icon type={'refresh'} />
                  重置
                </Form.Reset>
                <Form.Submit size="large" type="primary" onClick={onSubmit}>
                  <Icon type={'search'} />
                  查询
                </Form.Submit>
              </div>
            </FixFooterContainer>
          </Form>
        </div>
      </MobileDrawer>
    </div>
  );
}

export default Filter;