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

import '../style/reset.less';
import './styles.less';
// import {cloneDeep} from "lodash-es";
import {request} from "@qx/common";

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';
};
/* 表单组件 */
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 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',
          }}
        />
      </div>
    </>
  );
};
/* 聚合表组件 */
const AggreOption: React.FC<any> = (_props: any) => {
  //搜索
  const filterOption = (input: string, option: any) =>
    (option?.label ?? '').toLowerCase().includes(input.toLowerCase());

  return (
    <>
      <Title level={5} style={{ margin: '16px 0 8px' }}>
        {_props.title}
      </Title>
      <Select
        showSearch
        filterOption={filterOption}
        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,
  ...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={'qx-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>
    </>
  );
};