import React, { useEffect, useMemo, useState } from 'react';
import {
  getAggreList,
  getAppList,
  getDatasetListByAppid,
  getFunList,
} from './service';
import {
  Modal,
  Radio,
  Select,
  Typography,
} from 'antd';
import type { ModalProps } from 'antd';
import {QxBaseIcon} from '@qx/common';

import './styles.less';
import '../style/reset.less'

const { Title, Text } = Typography;
/**
 * 应用选择器
 * @constructor
 */
type QxAppSelectProps = {
  item?: Record<string, unknown>;
  modalProps: ModalProps;
  title?: string;
  code?: string;
  name?: string;
  onChange?: any;
  getConfig?: (appCode: string, funCode: string) => any;
  flow_add?: boolean;
  from?: string;
  flag?: string;
  clearData?: boolean;
  haveChildren?: boolean;
  clearDataSourceNode?: boolean;
  /**
   * 控制表单类型是否显示.
   *
   * 默认值 true
   */
  showTableTypeTab?: boolean;
  /**
   * 默认表单类型
   *
   * 默认值 single
   */
  defaultTableType?: 'single' | 'join';
  chartCustom?: boolean;
  nodeFrom?: 'flow_query_single';
  request: any;
};
/* 表单组件 */
const RelItemOption: React.FC<any> = (riProps) => {
  // const [visible, setVisible] = useState<boolean>(false);
  const [list, setList] = useState<any>(riProps.list);
  const [item, setItem] = useState<any>();
  useEffect(() => {
    if (riProps.item) {
      setItem(riProps.item);
    }

    if (riProps.list) {
      setList(riProps.list);
    }
  }, [riProps]);

  // const filter = (word: string) => {
  //   if (list) {
  //     const _data = cloneDeep(list);
  //     _data.forEach((it: Item) => {
  //       it.deleted = !(it.name.indexOf(word) > -1);
  //     });
  //
  //     setList(_data);
  //   }
  // };

  // const handleChange = (_keyword: string) => {
  //   filter(_keyword.trim());
  // };

  // const handleVisibleChange = (_visible: boolean) => {
  //   setVisible(_visible);
  // };

  // const menus = () => {
  //   return (
  //       <div className={'qx-search-menus__wrap'}>
  //         <Input
  //             className={'qx-selector-sub-search'}
  //             placeholder={'输入名称，回车搜索'}
  //             allowClear
  //             prefix={<QxBaseIcon type={'icon-app-search-line'} />}
  //             onChange={(e) => {
  //               handleChange(e.target.value);
  //             }}
  //         />
  //         <div>
  //           <Menu mode={'inline'} selectedKeys={riProps?.item?.code}>
  //             {list && list.length > 0 ? (
  //                 <>
  //                   {list.map((it: any) => {
  //                     return !it.deleted ? (
  //                         <Menu.Item
  //                             style={{ width: '100%' }}
  //                             onClick={() => {
  //                               riProps.onChange(it);
  //                               setVisible(false);
  //                             }}
  //                             key={it.code}
  //                         >
  //                           {it.name}
  //                         </Menu.Item>
  //                     ) : null;
  //                   })}
  //                 </>
  //             ) : null}
  //           </Menu>
  //         </div>
  //       </div>
  //   );
  // };

  //搜索
  const filterOption = (input: string, option: any) =>
      (option?.name ?? '').toLowerCase().includes(input.toLowerCase());

  return (
      <>
        <Title level={5} style={{ margin: '16px 0 8px' }}>
          {riProps.title}
        </Title>
        <div style={{ width: '100%'}}>
          <Select
            showSearch
            style={{ width: '100%', height: '36px' }}
            placeholder={riProps.placeholder || '请选择数据源'}
            options={list}
            value={item?.code}
            onChange={(val)=>{
              const _list = list.filter((el: any) => el.code === val);
              if(_list?.length) {
                riProps.onChange(_list[0])
              }
            }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            getPopupContainer={() => document.body}
            filterOption={filterOption}
            fieldNames={{
              label: 'name',
              value: 'code'
            }}
          />
          {/*<Popover*/}
          {/*  content={menus}*/}
          {/*  open={visible}*/}
          {/*  trigger={'click'}*/}
          {/*  onOpenChange={handleVisibleChange}*/}
          {/*  placement="bottomLeft"*/}
          {/*  overlayClassName={'qx-fg-select-overlay'}*/}
          {/*  getPopupContainer={(triggerNode) => triggerNode}*/}
          {/*>*/}
          {/*  <div*/}
          {/*    className={`ant-input qx-fr-input--fake select-source`}*/}
          {/*  >*/}
          {/*    <div>*/}
          {/*      {item?.name ? (*/}
          {/*        item.name*/}
          {/*      ) : (*/}
          {/*        <Text type="secondary">{riProps.placeholder}</Text>*/}
          {/*      )}*/}
          {/*    </div>*/}
          {/*    <DownOutlined />*/}
          {/*  </div>*/}
          {/*</Popover>*/}
        </div>
      </>
  );
};
/* 聚合表组件 */
const AggreOption: React.FC<any> = (_props: any) => {
  return (
      <>
        <Title level={5} style={{ margin: '16px 0 8px' }}>
          {_props.title}
        </Title>
        <Select
            allowClear
            style={{ width: '100%', height: '36px' }}
            placeholder={_props.placeholder || '请选择数据源'}
            options={_props.aggreList}
            value={_props.aggreValue}
            onChange={_props.onChange}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            getPopupContainer={() => document.body}
        />
      </>
  );
};

/**
 * 表单类型选择
 */
const TableTypeNode: React.FC<any> = (_typeProps: any) => {
  const {showTableTypeTab, flag} = _typeProps
  return (
      <>
        {showTableTypeTab && (
            <Radio.Group
                onChange={(e: any) => _typeProps.radioChange(e, _typeProps.appData)}
                value={_typeProps.radioType}
                defaultValue={_typeProps.defaultRadioType}
                optionType="button"
                style={{
                  width: '100%',
                  textAlign: 'center',
                  display: flag === 'join' ? '' : 'none',
                  height: '36px',
                }}
            >
              <Radio.Button
                  value="single"
                  style={{
                    width: '50%',
                    height: '36px',
                  }}
              >
                表单
              </Radio.Button>
              <Radio.Button
                  value="join"
                  style={{
                    width: '50%',
                    height: '36px',
                  }}
              >
                聚合表
              </Radio.Button>
            </Radio.Group>
        )}
      </>
  );
};

export const QxAppSelector: React.FC<QxAppSelectProps> = ({
  showTableTypeTab = true,
  defaultTableType = 'single',
  chartCustom = false,
  request,
  ...props
}) => {
  const [appList, setAppList] = useState<any[]>([]); //应用列表
  const [formList, setFormList] = useState<any[]>([]); //表单列表
  const [appItem, setAppItem] = useState<any>({}); //选择的应用
  const [formItem, setFormItem] = useState<any>({}); //选择的表单
  const [tableType, setTableType] = useState<string>(defaultTableType); //单个表单or聚合表
  const [aggreList, setAggreList] = useState<any[]>([]); //聚合表数据源
  const [aggreValue, setAggreValue] = useState<string>(); //聚合表选择的值
  const isDeveloperMode =
    window.sessionStorage.getItem('DEVELOPER_MODE') === '1';

  useEffect(() => {
    const _item = props.item || {};
    let targetItem: any = {};
    getAppList(request, { from: props.from }).then((res: any) => {
      if (!res?.length) {
        return;
      }
      // eslint-disable-next-line array-callback-return
      res.map((item: any) => {
        if (item.code === _item['currentId']) {
          item.name = item.name + '（本应用）';
        }
        if (item.code === _item['appId']) {
          targetItem = { ...item };
        }
      });
      setAppList(res);
      setAppItem(targetItem);
      if (!targetItem || !targetItem.code) {
        return;
      }
      if (props?.haveChildren) {
        getFunList(request, targetItem.code, { hasChild: true }).then((re: any) => {
          setFormList(re);
        });
      } else {
        getFunList(request, targetItem.code).then((re: any) => {
          setFormList(re);
        });
      }
      if (_item.flag === 'JOIN') {
        setFormItem({});
        //聚合表
        setTableType('join'); // 单选按钮切到'聚合表'
        if (!aggreList.length) {
          // 如果聚合表没有加载数据源
          const datasetApi = chartCustom
            ? getDatasetListByAppid(request, targetItem.code)
            : getAggreList(request);
          datasetApi.then((datasetRes: any) => {
            // eslint-disable-next-line array-callback-return
            datasetRes.map((item: any) => {
              item.label = item.name;
              item.value = item.code;
            });
            setAggreList(datasetRes);
            // console.log('聚合表数据源',res);
            const index = datasetRes.findIndex(
              (o: any) => o.code === String(_item['code']),
            ); //判断聚合表是否已被删除
            setAggreValue(index === -1 ? undefined : String(_item['code']));
          });
        } else {
          const index = aggreList.findIndex(
            (o: any) => o.code === String(_item['code']),
          );
          setAggreValue(index === -1 ? undefined : String(_item['code']));
        }
      } else {
        setTableType('single');
        setFormItem(_item);
        setAggreValue(undefined);
      }
    });
  }, [props.item]);

  const formChange = (item: any) => {
    setFormItem(item);
  };

  const appChange = (item: any) => {
    setAppItem(item);
    setFormItem({});
    if (props?.haveChildren) {
      getFunList(request, item.code, { hasChild: true }).then((re: any) => {
        setFormList(re);
      });
    } else {
      getFunList(request, item.code).then((res: any) => {
        setFormList(res);
      });
      const datasetApi = chartCustom
        ? getDatasetListByAppid(request, item.code)
        : getAggreList(request);
      datasetApi.then((datasetRes: any) => {
        // eslint-disable-next-line array-callback-return
        datasetRes.map((_item: any) => {
          _item.label = _item.name;
          _item.value = _item.code;
        });
        setAggreList(datasetRes);
        setAggreValue(undefined);
      });
    }
  };

  const radioChange = (e: any, data: any) => {
    setTableType(e.target.value);
    if (chartCustom) {
      if (e.target.value === 'join' && !aggreList.length) {
        const datasetApi = chartCustom
          ? getDatasetListByAppid(request, data?.code || '')
          : getAggreList(request);
        datasetApi.then((res: any) => {
          if (res && !!res.length) {
            // eslint-disable-next-line array-callback-return
            res.map((item: any) => {
              item.label = item.name;
              item.value = item.code;
            });
            setAggreList(res);
          } else {
            setAggreList([]);
          }
        });
      }
    } else {
      if (e.target.value === 'join' && !aggreList.length) {
        getAggreList(request).then((res: any) => {
          if (!res?.length) {
            return;
          }
          // eslint-disable-next-line array-callback-return
          res.map((item: any) => {
            item.label = item.name;
            item.value = item.code;
          });
          setAggreList(res);
        });
      }
    }
  };
  const aggreValueChange = (e: any) => {
    setAggreValue(e);
  };
  const handleGetConfig = () => {
    const appCode = appItem.extract;
    const funCode = formItem.extract?.code;
    if (!appCode || !funCode) return;
    //props.getConfig 当前为undefined--布尔判断为false
    if (props.getConfig) props.getConfig(appCode, funCode);
  };

  // 只要选的是用户中心 都过滤掉 用户与部门管理
  const workFormList = useMemo(() => {
    if (appItem?.extract === 'uc') {
      return formList?.filter(
        (o: any) => !['org', 'user'].includes(o.extract?.code),
      );
    }
    return formList;
  }, [appItem?.extract, formList, props.nodeFrom]);

  return (
    <>
      <Modal
        bodyStyle={{ padding: 0 }}
        className={'qx-query-designer'}
        wrapClassName={'qx-common__modal qx-app-selector__modal'}
        closeIcon={
          <QxBaseIcon
            className={'qx-common__modal--close'}
            type={'icon-close'}
          />
        }
        keyboard={false}
        maskClosable={false}
        {...props.modalProps}
        onOk={
          tableType === 'single'
            ? (e) => {
                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                props?.modalProps.onOk && props.modalProps.onOk(e);
                // 把应用id传出来
                props.onChange({
                  ...formItem,
                  appId: appItem.code,
                  flag: 'SINGLE',
                  appCode: appItem.extract,
                });
                handleGetConfig();
              }
            : (e) => {
                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                props?.modalProps.onOk && props.modalProps.onOk(e);
                // 把选择的聚合表的id传出来
                const aggreItem = aggreList.filter(
                  (ex: any) => ex.value === aggreValue,
                )[0];
                props.onChange({
                  ...aggreItem,
                  appId: appItem.code,
                  flag: 'JOIN',
                  appCode: appItem.extract,
                });
                // handleGetConfig()
              }
        }
        title={props.title || '选择关联表单'}
      >
        {chartCustom ? (
          <div style={{ width: '90%', margin: '10px auto' }}>
            <div style={{ margin: '20px auto' }}>
              <RelItemOption
                title={'应用'}
                list={appList}
                onChange={appChange}
                item={appItem}
                placeholder={'请选择应用'}
              />
              <>
                <Title level={5} style={{ margin: '20px 0 8px' }}>
                  数据类型
                </Title>
                <TableTypeNode
                  radioType={tableType}
                  defaultRadioType={defaultTableType}
                  appData={appItem}
                  radioChange={radioChange}
                  showTableTypeTab={showTableTypeTab}
                  flag={props.flag}
                />
              </>
              {tableType === 'single' ? (
                <div style={{ margin: '20px auto' }}>
                  <RelItemOption
                    title={'表单'}
                    list={formList}
                    onChange={formChange}
                    item={formItem}
                    placeholder={'请选择表单'}
                  />
                </div>
              ) : (
                <div style={{ margin: '20px auto' }}>
                  <AggreOption
                    aggreList={aggreList}
                    aggreValue={aggreValue}
                    onChange={aggreValueChange}
                    title={'聚合表'}
                    placeholder={'请选择聚合表'}
                  />
                </div>
              )}
            </div>
          </div>
        ) : (
          <div style={{ width: '90%', margin: '10px auto' }}>
            {props.title === '选择数据源' ? null : (
              <Text type="secondary">
                在表单中显示关联的记录。如：订单关联客户
              </Text>
            )}
            <TableTypeNode
              radioType={tableType}
              defaultRadioType={defaultTableType}
              appData={appItem}
              radioChange={radioChange}
              showTableTypeTab={showTableTypeTab}
              flag={props.flag}
            />
            {tableType === 'single' ? (
              <div style={{ margin: '20px auto' }}>
                <RelItemOption
                  title={'应用'}
                  // 非开发者模式下  过滤掉用户中心选项--钉钉2022.10.11
                  list={
                    isDeveloperMode
                      ? appList
                      : appList?.filter((o) => o?.extract !== 'uc')
                  }
                  onChange={appChange}
                  item={appItem}
                  placeholder={'请选择应用'}
                />
                <RelItemOption
                  title={'工作表'}
                  list={workFormList}
                  onChange={formChange}
                  item={formItem}
                  placeholder={'请选择工作表'}
                />
              </div>
            ) : (
              <div style={{ margin: '20px auto' }}>
                <AggreOption
                  aggreList={aggreList}
                  aggreValue={aggreValue}
                  onChange={aggreValueChange}
                  title={'数据表'}
                />
              </div>
            )}
          </div>
        )}
      </Modal>
    </>
  );
};

// type Item = {
//   name: string;
//   code?: string;
//   deleted?: boolean;
// };