import { QIXIAO_TOKEN } from '@/libs/token';
import { SYSTEM_WIDGETS } from '@/packages/qx-form-generator/src/utils/common';
import QxIcon from '@/packages/qx-icon';
import { RelMoreModal, RelSingleModal } from '@/pages/app-view/form';
import { EllipsisOutlined, SearchOutlined } from '@ant-design/icons';
import { QxSearch, QxTable } from '@qx/view-render';
import type { QxTableCellAPISchema } from '@qx/view-render/dist/table';
import {
  Button,
  Dropdown,
  Empty,
  Input,
  Menu,
  message,
  Popover,
  Tooltip,
  Tree,
} from 'antd';
import _ from 'lodash';
import { customAlphabet } from 'nanoid';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { QxButton } from '@qx/view-render';
import './index.less';

export * from '@qx/view-render';

/*TODO 待细化*/
interface QxRuntimeTableProps {
  appCode?: string;
  funCode?: string;
  viewCode?: string;
  tableRef?: any;
  tableLoading?: boolean;
  dataSource: any[];
  onClickBtn?: (code: any, data: any) => void;
  total?: number;
  searchApi?: any;
  onSelect?: () => void;
  onSelectAll?: () => void;
  selectKeys?: string[];
  mode?: any;
  max?: number;
  sort?: any[];
  onChange?: (pagination: any, filters: any, sorter: any) => void;
  [propName: string]: any;
  bodyHeight?: number
}

const QxRuntimeTable: React.FC<QxRuntimeTableProps> = (props) => {
  const {
    appCode,
    funCode,
    viewCode,
    tableRef,
    tableLoading,
    dataSource,
    onChange = () => {},
    onClickBtn = () => {},
    total,
    searchApi,
    ...otherProps
  } = props;

  const [rowData, setRowData] = useState<any>();
  const [cellSchema, setCellSchema] = useState<any>();
  const [clickInfo, setClickInfo] = useState<any>();
  const [random, setRandom] = useState<string>(); //随机数

  const relMoreModalRef = useRef({
    open: (values: any) => {
      console.log(values);
    },
    close: () => {},
  });

  const relSingleModalRef = useRef({
    open: (values: any) => {
      console.log(values);
    },
    close: () => {},
  });

  function getId() {
    return customAlphabet('abcdefghijklmnopqistuvwxyz', 6)();
  }

  const handleCellClick = (record: any, schemaData: QxTableCellAPISchema, info?: any) => {
    // console.log(record,schemaData,info)
    setRowData(record); //点击行的数据
    setCellSchema(schemaData); //列的schema
    setClickInfo(info || '') // 点击标签的data_title id
    setRandom(getId());
  };

  useEffect(() => {
    if (cellSchema?.link) {
      //详情链接   标题、描述
      onClickBtn({ code: 'VIEW' }, rowData);
    } else {
      //1、关联记录以标签显示的时候，直接弹出该条数据详情
      //2、关联记录以表格显示的时候，弹出关联记录表格
      if (cellSchema?.widget === 'relSelector') {
        if (cellSchema?.mode === 'TABLE' && (rowData[cellSchema?.dataIndex] || []).length) {
          //关联记录  表格形式
          relMoreModalRef.current.open({
            appCode: appCode,
            funCode: funCode,
            viewCode: viewCode,
            fieldName: cellSchema?.dataIndex,
            dataId: rowData?.id, //当前行的id
            idArr: rowData[cellSchema?.dataIndex], //当前行  用户所点击列的关联记录id数组
            modalTitle: cellSchema?.title,
            widget: cellSchema?.widget, //关联表的标识
          });
        } else {
          //关联记录  标签形式
          // const info = dataSource.filter((o: any) => o.id === rowData?.id)[0][
          //   cellSchema?.dataIndex + '_info_'
          // ];
          relSingleModalRef.current.open({
            // 后端数据结构调整    这里去掉了relAppCode和relFuncode   改为在获取详情schema时返回
            // appCode: cellSchema.relAppCode,
            // funCode: cellSchema.relFunCode,
            params: { appCode, funCode, fieldName: cellSchema?.dataIndex },
            fieldName: cellSchema?.dataIndex,
            dataId: rowData?.id, //当前行的id
            relFormId: clickInfo?.id, //表的id
            modalTitle: clickInfo?.data_title, //表名
          });
        }
      } else if (cellSchema?.widget === 'subform' && cellSchema?.type === 'TABLE') {
        //子表
        relMoreModalRef.current.open({
          appCode: appCode,
          funCode: funCode,
          viewCode: viewCode,
          fieldName: cellSchema?.dataIndex,
          dataId: rowData?.id, //当前行的id
          modalTitle: cellSchema?.title,
          widget: cellSchema?.widget, //子表的标识
        });
      }
    }
  }, [rowData, cellSchema, random]);

  return (
    <>
      <QxTable
        cRef={tableRef}
        {...otherProps}
        loading={tableLoading}
        dataSource={dataSource}
        onClickBtn={onClickBtn}
        onCellClick={handleCellClick}
        onChange={onChange}
        onSelect={props.onSelect}
        onSelectAll={props.onSelectAll}
        selectKeys={props.selectKeys}
        total={total}
        mode={props.mode}
        max={props.max}
        sort={props?.sort}
        onPage={props?.onPage}
        QIXIAO_TOKEN={QIXIAO_TOKEN}
      />
      <RelMoreModal cRef={relMoreModalRef} />
      <RelSingleModal cRef={relSingleModalRef} />
    </>
  );
};

interface QxRuntimeTreeProps {
  appCode?: string;
  funCode?: string;
  viewCode?: string;
  tableLoading?: boolean;
  dataSource: any;
  onClickBtn: (code: object, data: any) => {};
  searchApi: any;
  onSelect?: () => {};
  onChange?: (pagination: any, filters: any, sorter: any) => void;
  [propName: string]: any;
  treeSchema: any;
  onTreeDrop: (nodeId: string, parent: string, next: string) => void;
}

const QxRuntimeTree: React.FC<QxRuntimeTreeProps> = (props) => {
  const { treeSchema, dataSource, onClickBtn, onTreeDrop } = props;

  const [expandedKeys, setExpandedKeys] = useState<any[]>([]); //默认展开的节点
  const [keyword, setKeyword] = useState<string>('');
  const [treeData, setTreeData] = useState<any[]>([]);
  const [data, setData] = useState<any>([]);

  // 拖拽节点 相关代码
  // 根据parentNodeId得到parentNodeType
  const parentNode = (parentNodeData: any, parentNodeId: string) => {
    for (let i = 0; i < parentNodeData.length; i++) {
      if (parentNodeId == parentNodeData[i].code) {
        return parentNodeData[i].type;
      }
      if (parentNodeData[i].children) {
        const res: any = parentNode(parentNodeData[i].children, parentNodeId);
        if (res) {
          return res;
        }
      }
    }
  };
  const handleDrop = (val: any) => {
    const { node, dragNode, dropToGap } = val;
    const dragNodeId = dragNode.code;
    let nextNodeId = node.__next;
    let parentNodeId = node.__pId ? node.__pId : '*';
    if (!dropToGap) {
      parentNodeId = node.code ? node.code : '*';
      nextNodeId = (node.children[0] && node.children[0].code) || null;
    }
    const parentNodeType = parentNode(dataSource, parentNodeId); // 根据parentNodeId得到parentNodeType
    if (parentNodeType === 'PAGE') {
      message.warning('不能移动至页面下');
      return;
    }
    if (parentNodeId === '*' || dragNodeId === nextNodeId) {
      return;
    }
    onTreeDrop(dragNodeId, parentNodeId, nextNodeId);
  };

  let codeArr: any = [];

  /**
   * 获取需要展开的节点
   * @param arr nodesData
   * @param expandLevel 需要展开的级别默认二级
   * @param pId
   */
  const loopTreeNode = (nodesData: any[], expandLevel: number) => {
    let nextExpendLevel = expandLevel;
    // if (expandLevel > 0) {
    nextExpendLevel -= 1;
    // }
    // @ts-ignore
    nodesData.forEach((item, index) => {
      if (nextExpendLevel >= 0) {
        codeArr.push(item.code);
      }
      item.key = item.code;
      item.__next = nodesData[index + 1] ? nodesData[index + 1].code : null;

      if (!item.children) {
        item.isLeaf = true;
      } else {
        loopTreeNode(item.children, nextExpendLevel);
      }
    });
  };
  const getExpandedArr = (nodesData: any[]) => {
    nodesData.forEach((item) => {
      codeArr.push(item.code);
      if (item.children) {
        getExpandedArr(item.children);
      }
    });
  };

  const generateTreeData = useCallback((_data: any[], _keywords?: string): any[] => {
    const _treeNode: any[] = [];
    _data.map((item) => {
      if (typeof item.visible === 'boolean' && !item.visible) {
        return;
      }
      const _item: any = {
        ...item,
        children: [],
      };
      if (item.children) {
        _item.children = generateTreeData(item.children, _keywords);
      }
      _treeNode.push(_item);
    });
    return _treeNode;
  }, []);

  const filter = (word: string) => {
    setKeyword(word);
    const traverse = function (node: any) {
      const childNodes = node.children || [];
      node.visible = node.name.indexOf(word) > -1;

      childNodes.forEach((child: any) => {
        child.visible = child.name.indexOf(word) > -1;
        traverse(child);
      });

      if (!node.visible && childNodes.length) {
        node.visible = childNodes.some((child: any) => child.visible);
      }
    };
    if (data) {
      const _data = _.cloneDeep(data);
      if (word != '') {
        // @ts-ignore
        _data.forEach((item) => {
          traverse(item);
        });
      }
      setTreeData(generateTreeData(_data, word));
    }
  };
  // 搜索框事件
  const handleChange = (e: { type: string; target: { value: string } }) => {
    const keywordText = e.target.value.replace(/(^\s*)|(\s*$)/g, '');

    if (e.type === 'click' && e.target.value === '' && keyword !== '') {
      // 清空
      setData(dataSource);
      setTreeData(dataSource);
    } else {
      if (keywordText) {
        filter(keywordText);
      } else {
        setData(dataSource);
        setTreeData(dataSource);
      }
    }
  };
  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // @ts-ignore
    const keywordText = e.target.value.replace(/(^\s*)|(\s*$)/g, '');
    if (keywordText) {
      filter(keywordText);
    } else {
      setData(dataSource);
      setTreeData(dataSource);
    }
  };

  useEffect(() => {
    if (!dataSource || !treeSchema || !dataSource.length) {
      return;
    }
    setData(dataSource);
    setTreeData(dataSource);
    const config = treeSchema?.tree || {};
    if (!config?.expandLevel && config?.expandLevel === 0) {
      codeArr = [];
      getExpandedArr(dataSource || []);
      setExpandedKeys(codeArr);
    } else {
      codeArr = [];
      loopTreeNode(dataSource || [], config?.expandLevel);
      setExpandedKeys(codeArr);
    }
  }, [dataSource, treeSchema]);

  const getBtnDom = (val: any, filterData: any, schema: any) => {
    if (!filterData?.extract?.[val.flag]) {
      return null;
    }
    let icon = val.icon;
    let name = val.name;
    if (schema?.tree?.style === 'text') {
      icon = '';
    }
    if (icon && (schema?.tree?.style === 'icon' || !schema?.tree?.style)) {
      name = '';
    }
    let btnElem;
    if (val.name.length > 4) {
      btnElem = (
        <QxButton
          key={val.code}
          color={val.color}
          icon={icon}
          type={'link'}
          size={'small'}
          disabled={val.disabled}
          tooltip={val.tooltip || (name && val.name)}
          onClick={() => {
            onClickBtn({ code: val.code, ...val }, filterData);
          }}
        >
          {name ? name.substring(0, 4) + '...' : name}
        </QxButton>
      );
    } else {
      btnElem = (
        <QxButton
          key={val.code}
          color={val.color}
          icon={icon}
          type={'link'}
          size={'small'}
          disabled={val.disabled}
          tooltip={val.tooltip}
          onClick={() => {
            onClickBtn({ code: val.code, ...val }, filterData);
          }}
        >
          {name}
        </QxButton>
      );
    }

    if (schema?.tree?.style === 'icon' || !schema?.tree?.style) {
      return (
        <Tooltip key={val.code} title={val.name}>
          {btnElem}
        </Tooltip>
      );
    } else {
      return btnElem;
    }
  };

  // 渲染节点
  const renderTitle = (nodeData: any) => {
    const btnList = (treeSchema?.tree?.action?.renderData?.buttons || []).filter((item: any) => {
      if (!!nodeData?.extract?.[item.flag]) {
        return item;
      }
    });
    // 超过 6 个则放入更多操作
    const MAX = 6;
    const isOverMax = btnList?.length > MAX + 1;
    const isEqualMax = btnList?.length === MAX + 1;

    return (
      <>
        {nodeData?.level > 1 && (
          <QxIcon
            type={'icon-pailie'}
            style={{
              fontSize: 18,
              color: '#999',
              marginRight: '8px',
            }}
          />
        )}
        {nodeData.name && nodeData.name.length > 30 ? (
          <Tooltip key={nodeData.code} title={nodeData.name}>
            <span>{nodeData.name.substring(0, 30) + '...'}</span>
          </Tooltip>
        ) : (
          <span>{nodeData.name}</span>
        )}
        <div className={'qx-tree-btn-list'}>
          {_.take(btnList, isEqualMax ? MAX + 1 : MAX).map((val: any) => {
            return getBtnDom(val, nodeData, treeSchema);
          })}
          {isOverMax && (
            <Dropdown
              overlayClassName="qx-tree-drop-down"
              placement="bottomRight"
              overlay={
                <Menu>
                  {_.drop(btnList, MAX).map((val: any) => {
                    return (
                      <Menu.Item key={val.code}>{getBtnDom(val, nodeData, treeSchema)}</Menu.Item>
                    );
                  })}
                </Menu>
              }
              getPopupContainer={(trigger: any) => trigger.parentNode}
            >
              <Button className={'qx-tree-drop-down-btn'} type="text">
                <EllipsisOutlined />
              </Button>
            </Dropdown>
          )}
        </div>
      </>
    );
  };

  return (
    <div className={'qx-tree-list'} style={{ padding: '20px', backgroundColor: '#fff' }}>
      {data && data.length > 0 && treeSchema?.tree?.searchSwitch && (
        <Input
          className={'qx-selector-sub-search'}
          style={{
            borderBottom: '1px solid #f0f0f0',
          }}
          placeholder={'请输入关键字，按回车键搜索'}
          allowClear
          prefix={<SearchOutlined style={{ marginTop: '4px' }} />}
          onChange={(e) => {
            handleChange(e);
          }}
          onPressEnter={(e) => {
            handleSearch(e);
          }}
        />
      )}
      <>
        {treeData && treeData.length > 0 ? (
          <Tree
            treeData={treeData}
            fieldNames={{
              title: 'name',
              key: 'code',
              children: 'children',
            }}
            titleRender={(nodeData) => renderTitle(nodeData)}
            blockNode={true}
            onDrop={handleDrop}
            draggable={
              treeSchema?.tree?.dragSwitch
                ? {
                    nodeDraggable: (node: any) => {
                      if (node.pid === '*') {
                        return false;
                      }
                      return true;
                    },
                  }
                : false
            }
            selectable
            defaultExpandedKeys={expandedKeys}
            expandedKeys={expandedKeys}
            checkStrictly={true}
            // @ts-ignore
            onExpand={(keys) => setExpandedKeys(keys)}
          />
        ) : (
          <Empty className={'qx-tree-list__empty'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </>
    </div>
  );
};

const QxSearchForm = (props: any) => {
  const widgets = { ...SYSTEM_WIDGETS, ...(props.widgets || {}) };
  return <QxSearch {...props} widgets={widgets} />;
};

// 快捷查询 功能相关代码
interface QxQuickSearchTabsProps {
  list: any[];
  tabActiveCode: string | undefined;
  onChange: (value: any) => void;
}

// scroll状态
export enum SCROLL {
  start,
  middle,
  end,
}

const QxQuickSearchTabs: React.FC<QxQuickSearchTabsProps> = (props: any) => {
  const { list, tabActiveCode, onChange } = props;
  const [tabsIcon, setTabsIcon] = useState<boolean>(false);
  const [scroll, setScroll] = useState<SCROLL>(SCROLL.start);

  /*  useEffect(() => {
    if (!list || !list.length) {
      return;
    }
    onChange(list[0].code);
  }, [list]);*/

  const getQuickSearchScroll = () => {
    const tabsDom: any = document?.getElementById('quickSearchTabs');
    if (tabsDom?.offsetWidth - tabsDom?.scrollWidth < 0) {
      setTabsIcon(true);
      const translate = tabsDom.style?.transform;
      const translateNum = translate.split('(').pop().split('p').shift();
      if (Number(translateNum) == 0) {
        setScroll(SCROLL.start);
      } else if (Math.abs(Number(translateNum)) > 0) {
        if (
          Math.abs(Number(translateNum)) == Math.abs(tabsDom?.offsetWidth - tabsDom?.scrollWidth)
        ) {
          setScroll(SCROLL.end);
        } else {
          setScroll(SCROLL.middle);
        }
      }
    } else {
      setTabsIcon(false);
    }
  };

  const handleClick = (changedCode: any, index: number, e: any) => {
    const tabItemLeft = e.currentTarget.offsetLeft - 20;
    const tabItemWidth = e.currentTarget.clientWidth;
    const tabsDom: any = document?.getElementById('quickSearchTabs');
    const translate = tabsDom.style?.transform;
    const translateNum = Math.abs(Number(translate.split('(').pop().split('p').shift() || 0));
    let widget = translateNum + tabsDom.clientWidth - (tabItemLeft + tabItemWidth);
    if (widget > 0) {
      if (translateNum === 0) {
        tabsDom.style.cssText = 'transform: translate(0px,0px);';
      } else {
        widget = index > 0 ? tabItemLeft + 20 : tabItemLeft;
        if (translateNum > tabItemLeft) {
          tabsDom.style.cssText = 'transform: translate(' + -widget + 'px,0px);';
        }
      }
    } else if (widget < 0) {
      widget = translateNum + Math.abs(widget);
      tabsDom.style.cssText = 'transform: translate(' + -widget + 'px,0px);';
    }

    if (changedCode === tabActiveCode) return;
    onChange(changedCode);
  };

  const scrollPrev = () => {
    const tabsDom: any = document?.getElementById('quickSearchTabs');
    const translate = tabsDom.style?.transform;
    const translateNum = Math.abs(Number(translate.split('(').pop().split('p').shift() || 0));
    let widget = translateNum - tabsDom?.offsetWidth;
    if (widget < 0) {
      widget = 0;
      setScroll(SCROLL.start);
    } else {
      setScroll(SCROLL.middle);
    }
    tabsDom.style.cssText = 'transform: translate(' + -widget + 'px,0px);';
  };

  const scrollNext = () => {
    const tabsDom: any = document?.getElementById('quickSearchTabs');
    const translate = tabsDom.style?.transform;
    const translateNum = Math.abs(Number(translate.split('(').pop().split('p').shift() || 0));
    let widget = translateNum + tabsDom?.offsetWidth;
    if (widget > Math.abs(tabsDom?.offsetWidth - tabsDom?.scrollWidth)) {
      widget = Math.abs(tabsDom?.offsetWidth - tabsDom?.scrollWidth);
      setScroll(SCROLL.end);
    } else {
      setScroll(SCROLL.middle);
    }
    tabsDom.style.cssText = 'transform: translate(' + -widget + 'px,0px);';
  };

  useEffect(() => {
    getQuickSearchScroll();
  });

  useEffect(() => {
    if (!tabActiveCode) {
      return;
    }
    const idx = list.findIndex((val: any) => val.code === tabActiveCode);
    const tabsDom: any = document?.getElementById('quickSearchTabs');
    if (idx === 0) {
      tabsDom.style.cssText = 'transform: translate(0px,0px);';
    }
  }, [tabActiveCode]);

  return (
    <div
      className={'qx-view-quick-search-container'}
      style={{
        padding: tabsIcon ? '0 20px' : 0,
      }}
    >
      {tabsIcon && (
        <Button
          className={'left-button'}
          type="text"
          icon={<QxIcon type={'icon-tag-left-translate'} style={{ fontSize: 10 }} />}
          disabled={scroll == SCROLL.start}
          onClick={scrollPrev}
        />
      )}
      <div id="quickSearchTabs" className="qx-view-quick-search">
        {list.map((pane: any, index: number) =>
          pane.title && pane.title.length > 6 ? (
            <Popover key={pane.code} content={pane.title} title={null}>
              <div
                key={pane.code}
                className={`qx-view-quick-search__item ${
                  tabActiveCode === pane.code ? 'selected' : null
                }`}
                onClick={(e) => handleClick(pane.code, index, e)}
              >
                {pane.title.substring(0, 5) + '...'}
              </div>
            </Popover>
          ) : (
            <div
              key={pane.code}
              className={`qx-view-quick-search__item ${
                tabActiveCode === pane.code ? 'selected' : null
              }`}
              onClick={(e) => handleClick(pane.code, index, e)}
            >
              {pane.title}
            </div>
          ),
        )}
      </div>
      {tabsIcon && (
        <Button
          className={'right-button'}
          type="text"
          icon={<QxIcon type={'icon-tag-right-translate'} style={{ fontSize: 10 }} />}
          disabled={scroll == SCROLL.end}
          onClick={scrollNext}
        />
      )}
    </div>
  );
};

export { QxSearchForm, QxRuntimeTable, QxRuntimeTree, QxQuickSearchTabs };