import { CloseCircleFilled } from '@ant-design/icons';
import _ from 'lodash-es';
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import { handleHighlight } from '../qx-function-operation/components/var-picker';
import {
  domTagGen,
  flatten,
  reverseStr,
  strFill,
  widgetMapping,
} from '../qx-function-operation/util';
import './style.less';

import Cm from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror.js';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import './plugins/cm-extensions';

import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/theme/idea.css';

import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js'; // ctrl代码提示补全

import 'codemirror/addon/selection/active-line.js'; // 光标代码高亮

import 'codemirror/addon/edit/matchbrackets.js';
import 'codemirror/addon/lint/javascript-lint.js';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint.js'; // 错误提示
import beautify from 'js-beautify';
import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;

type PositionProps = {
  s: number;
  e: number;
};

export type VariableProps = {
  variable: string;
  pos: PositionProps;
};

/**
 * 字符串中提取变量（${xxx}）
 * @param code
 */
export const getAllVariable = (code: string) => {
  let codeLocal: string = _.clone(code);
  if (!codeLocal) {
    return [];
  }
  const variables: VariableProps[] = [];

  function loopGet() {
    const pos: PositionProps = {
      s: codeLocal.indexOf('${'),
      e: codeLocal.indexOf('}'),
    };
    if (pos.s === -1 && pos.e === -1) {
      return;
    }
    const variable = codeLocal.slice(pos.s, pos.e + 1);
    variables.push({ variable, pos });
    codeLocal = codeLocal.replace(variable, strFill(0, variable.length, 0));

    loopGet();
  }

  loopGet();
  return variables;
};

const getWidgetByType = (type?: string) => {
  let res: string;
  switch (type) {
    case 'TEXT':
      res = 'qxInput';
      break;
    case 'NUM':
      res = 'qxNumber';
      break;
    default:
      res = '';
  }
  // @ts-ignore
  return res;
};

type VarProps = {
  key: string;
  name?: string;
  type?: string;
};

type EditorProps = {
  cRef: any;
  // eg: 'hello ${v1} ${v2}!'
  value: string;
  // eg: {'${v1}': 'hehe', '${v2}': 'enen'}
  // variableObj: Record<string, string> | undefined;
  isUseFun: boolean;
  autofocus?: boolean;
  newVariable: VarProps;
  funcDataList: any[];
  varDataList: any[];
  className?: any;
  style?: any;
  readOnly?: boolean;
  from?: string;
  resetValue?: string;
  allowClear?: boolean | undefined;
  onChange: (code: string) => void;
  onFocusFunc: (funcName: string | null) => void;
};

const CodeEditor: React.FC<EditorProps> = ({
  cRef,
  funcDataList,
  varDataList,
  isUseFun,
  autofocus,
  readOnly,
  allowClear,
  resetValue,
  value,
  newVariable,
  from,
  className,
  onChange,
  onFocusFunc,
}) => {
  const [isInitDone, setIsInitDone] = useState<boolean>(false);
  const [valueLocal, setValueLocal] = useState<string>();
  const [editor, setEditor] = useState<any>(null);
  const formatRef = useRef(false); // 代码格式化引起的变化
  // 定义匹配括号的正则表达式
  const bracketRegex = /[(){}\[\]]/g;

  useEffect(() => {
    if (!editor) return;
    editor.on('mousedown', (_cm: any, event: any) => {
      // 1 = 鼠标左键，2 = 鼠标右键，4 = 鼠标中键
      if (event.buttons === 1) {
        const element = event.target as Element;
        if (element.classList.contains('funcName')) {
          const funcName = element.getAttribute('data-widget');
          const funcData = funcDataListFlatten.current.find(
            (data: any) => data.funcNameEg === funcName,
          );
          if (funcData && typeof onFocusFunc === 'function') {
            onFocusFunc(funcData);
          }
        }
      }
    });
    // 添加占位符功能
    const placeholderText = editor.getOption('placeholder');
    const placeholderElement = document.createElement('div');
    placeholderElement.className = 'CodeMirror-placeholder';
    placeholderElement.textContent = placeholderText;
    editor.getWrapperElement().appendChild(placeholderElement);

    const handleChange = () => {
      const value = editor.getValue();
      if (value?.length) {
        placeholderElement.style.display = 'none';
      } else {
        placeholderElement.style.display = 'block';
      }
      const lastLine = editor.lastLine();
      editor.scrollIntoView(
        { line: lastLine, ch: 0, margin: { bottom: 50 } },
        100,
      );

      setTimeout(() => {
        // 获取编辑器的包装元素
        const wrapperElements =
          document.getElementsByClassName('CodeMirror-widget');
        // 将 cm-ignore-events 的值设为 false
        for (let i = 0; i < (wrapperElements || []).length; i++) {
          wrapperElements[i].setAttribute('cm-ignore-events', 'false');
        }
      }, 100);

      // 在内容中查找匹配的括号
      let match: any;
      while ((match = bracketRegex.exec(value))) {
        const from = { line: 0, ch: match.index };
        const to = { line: 0, ch: match.index + 1 };

        // 标记匹配的括号并应用 CSS 类名
        editor.markText(from, to, { className: 'bracket-mark' });
      }

      // const processedContent = value.replace(/(\(|\)|\[|\]|\{|\})/g, '<span class="custom-paren">$1</span>');
      // editor.setValue(processedContent);
    };
    handleChange();

    // 监听编辑器的输入事件
    editor.on('change', handleChange);
  }, [editor]);

  // 扁平化dataSource
  const funcDataListFlatten: any = useRef([]);
  if (!funcDataListFlatten.current.length && funcDataList.length) {
    flatten(funcDataList, funcDataListFlatten.current);
  }
  const funcDataListSimple: any = {};
  funcDataListFlatten.current.forEach((item: any) => {
    Object.assign(funcDataListSimple, { [item.title]: item.title });
  });
  // 以变量字符长度排序，确保`DATAIF`比`IF`优先匹配
  const funcDataListSort = funcDataListFlatten.current;

  useEffect(() => {
    if (funcDataListSort.length) {
      setTimeout(() => {
        cmUtils.variableRender();
      }, 100);
    }
  }, [JSON.stringify(funcDataListSort)]);

  // const varDataListFlatten: any[] = [];
  const varDataListFlatten = useRef<any[]>([]);
  if (!varDataListFlatten.current.length && varDataList.length) {
    flatten(varDataList, varDataListFlatten.current);
  }
  // flatten(varDataList, varDataListFlatten);
  const varDataListSimple: any = {};
  varDataListFlatten.current.forEach((item) => {
    Object.assign(varDataListSimple, { [item.key]: item.titleStr });
    if (item.attrs) {
      item.attrs.forEach((attrItem: any) =>
        Object.assign(varDataListSimple, {
          [attrItem.key]: `${item.titleStr}.${attrItem.titleStr}`,
        }),
      );
    }
  });

  // 插入的变量在函数内，并且前面也是变量
  const isInFunc = (id: number, code: string) => {
    let left1: number = 0;
    let left2: number = 0;
    let right1: number = 0;
    let right2: number = 0;
    // 前面是否是变量
    const beforeVar = code.split('')[id - 1] === '}';
    code.split('').forEach((item, index) => {
      if (index < id) {
        if (item === '(') {
          left1++;
        } else if (item === ')') {
          left2++;
        }
      } else {
        if (item === '(') {
          right1++;
        } else if (item === ')') {
          right2++;
        }
      }
    });
    return left1 > left2 && right1 < right2 && beforeVar;
  };

  const cmUtils: {
    insert: (variable: string, isFormula: boolean) => void;
    variableRender: () => void;
  } = {
    // 插入变量
    insert: (variable: string, isFormula: boolean = false) => {
      // 光标位置插入新值（变量）
      // editor.replaceSelection(variable);

      // "公式"类型变量时
      if (isFormula) {
        // 光标位置固定插入内容
        editor.replaceSelection(variable + '()');
        // 光标左移
        editor.execCommand('goCharLeft');
      } else {
        const pos = editor.getCursor()?.ch;
        const inFunc = isInFunc(pos, editor.getValue());
        if (inFunc) {
          editor.replaceSelection(',' + variable);
        } else {
          editor.replaceSelection(variable);
        }
      }
      cmUtils.variableRender();
      // 让编辑器聚集
      editor.focus();
    },

    // 替换变量（变量示例：${xxx}）
    variableRender: () => {
      const code = _.cloneDeep(editor.getValue());
      // 换行分隔
      const codeArr = code.split('\n');

      const makeText = (
        line: number,
        sIndex: number,
        eIndex: number,
        variable: string,
        text: string,
        hasError: boolean,
        type?: string,
      ) => {
        editor.markText(
          {
            line: line,
            ch: sIndex,
          },
          {
            line: line,
            ch: eIndex,
          },
          {
            replacedWith: domTagGen(
              variable,
              text,
              hasError ? 'red' : '#026be1',
              type,
            ),
            inclusiveRight: false,
            readOnly: false,
          },
        );
      };

      const replacement = (
        line: number,
        regexp: any,
        refObj: any,
        type?: string,
      ) => {
        const lineStr = codeArr[line];
        let match: any;
        while ((match = regexp.exec(lineStr)) !== null) {
          const variable = match[0];
          const sIndex = match.index;
          const eIndex = sIndex + variable.length;
          const text: string = refObj[variable] || '（已缺失）';
          if (!type || (type === 'function' && lineStr[eIndex] === '(')) {
            const hasError: boolean = refObj[variable] === undefined;
            makeText(line, sIndex, eIndex, variable, text, hasError, type);
            codeArr[line] = codeArr[line].replace(
              variable,
              strFill(0, variable.length, 0),
            );
          }
        }
      };

      const funcRegexp = new RegExp(
        funcDataListSort
          .map((data: any) => {
            return '\\b' + data.title + '\\b';
          })
          .join('|'),
        'g',
      );

      for (let i = 0; i < editor.doc.size; i++) {
        // 替换变量名称
        const regexp = /\$\{.*?\}/g;
        replacement(i, regexp, varDataListSimple);
        if (Boolean(isUseFun) && funcDataListSort.length > 0) {
          // 替换函数公式名称
          replacement(i, funcRegexp, funcDataListSimple, 'function');
        }
      }
    },
  };

  const getFuncId = (name: string) => {
    return funcDataListFlatten.current.find(
      (item: any) => item.funcNameEg === name,
    )?.id;
  };

  useEffect(() => {
    if (value && !isInitDone) {
      // 限制初始值只设置一次
      setValueLocal(value);
    }
  }, [value]);

  useEffect(() => {
    // 消息提醒 新增模板时  触发方式变为"定时触发"时 需要将消息内容中的表单字段值清除
    if (resetValue) {
      setValueLocal(resetValue);
    }
  }, [resetValue]);

  useEffect(() => {
    if (newVariable) {
      cmUtils.insert(newVariable.key, newVariable.type === 'fun');
    }
  }, [newVariable]);

  // 编辑器内容变化响应
  const onHandleChange = (editor: any, data: any, value: string) => {
    cmUtils.variableRender();
    onChange(value);
    setIsInitDone(true);
    if (!formatRef.current) {
      editor.showHint();
    }
    formatRef.current = false;
    // 函数补全时，光标左移
    if (data.origin === 'complete' && data.text?.[0]?.endsWith('()')) {
      editor.execCommand('goCharLeft');
      const funcName = data.text?.[0].slice(0, -2);
      const funcData = funcDataListFlatten.current.find(
        (data: any) => data.funcNameEg === funcName,
      );
      if (funcData && typeof onFocusFunc === 'function') {
        onFocusFunc(funcData);
      }
    }
    if (value === '') {
      onFocusFunc(null);
    }
  };

  // 光标移动响应
  // const onHandleCursor = (editor: any, cursor: any) => {
  //   const lineStr = editor.getLine(cursor.line);
  //   const funcName = getLegalVaribleNameFromIndex(lineStr, cursor.ch);
  //   const funcData = funcDataListFlatten.find(
  //     (data) => data.title === funcName,
  //   );
  //   if (funcData && typeof onFocusFunc === 'function') {
  //     onFocusFunc(funcData);
  //   }
  // };

  // 格式化code文本
  const autoFormatSelection = () => {
    const code = editor.getValue(); // 获取编辑器中的代码
    let beautifiedCode = beautify(code); // 使用代码美化工具（如 js-beautify）美化代码
    beautifiedCode = beautifiedCode.replace(
      /\$\s*\{\s*(.*?)\s*\}/g,
      function (a, b) {
        return '${' + b + '}';
      },
    );
    formatRef.current = true;
    editor.setValue(beautifiedCode); // 将美化后的代码设置回编辑器
  };

  // 代码提示
  const hintCompletion = (cm: any, options: any) => {
    const funRegex = /[a-zA-Z0-9_\u4e00-\u9fff]/;
    const dotRegex = /\./;
    const varRegex = /^\.(\}.*?\{\$)/;
    const comp = funcDataListSort.map((data: any) => data.title);
    return new Promise((accept) => {
      setTimeout(() => {
        const cursor = cm.getCursor();
        const line = cm.getLine(cursor.line);
        let start = cursor.ch;
        let end = cursor.ch;
        let completions = [];
        while (start && funRegex.test(line.charAt(start - 1))) --start;
        while (end < line.length && funRegex.test(line.charAt(end))) ++end;
        const word = line.slice(start, end);
        if (start && dotRegex.test(line.charAt(start - 1))) {
          // 提示对象.属性
          if (word === '') {
            const lineReverse = reverseStr(line.slice(0, start));
            const matched = varRegex.exec(lineReverse);
            const word = matched ? reverseStr(matched[1]) : '';
            const findVar = varDataListFlatten.current.find(
              (item: any) => item.key === word,
            );
            if (findVar && findVar.attrs) {
              completions.push(
                ...findVar.attrs.map((attrItem: any) => ({
                  text: attrItem.key,
                  displayText: attrItem.titleStr,
                  from: Cm.Pos(cursor.line, start - word.length - 1),
                  to: Cm.Pos(cursor.line, end),
                  customInfo: {
                    widget: getWidgetByType(attrItem.fieldGroupType),
                  },
                })),
              );
            }
          }
        } else {
          // 提示公式函数名、变量
          if (word) {
            for (let i = 0; i < comp.length; i++) {
              if (comp[i].toLowerCase().indexOf(word.toLowerCase()) > -1) {
                completions.push(comp[i]);
              }
            }
            for (let i = 0; i < varDataListFlatten.current.length; i++) {
              const it = varDataListFlatten.current[i];
              if (it.titleStr.indexOf(word) > -1) {
                completions.push({
                  text: it.key,
                  displayText: it.titleStr,
                });
              }
            }
          }
        }

        // const firstFieldIndex = completions.findIndex(item => typeof item !== 'string');
        completions = completions.map((item: any, index) => {
          if (typeof item === 'string') {
            return {
              text: item + '()',
              displayText: item,
              render: (element: any, self: any, data: any) => {
                const container = document.createElement('div');
                container.className = 'hint-line';
                const top = document.createElement('div');
                // @ts-ignore
                const jsxEl: React.ReactElement = handleHighlight(
                  item,
                  word,
                  'fx',
                );
                ReactDOM?.render(jsxEl, top);
                // top.innerHTML = <span>122</span>;
                top.className = 'hint-line_left';
                const bottom = document.createElement('div');
                bottom.className = 'hint-line_right';
                // @ts-ignore
                const desc =
                  funcDataListFlatten.current.find(
                    (it: any) => it.funcNameEg === item,
                  )?.funcName || '';
                bottom.innerHTML = desc;
                container.appendChild(top);
                container.appendChild(bottom);
                element.appendChild(container);
                element.addEventListener('click', function () {
                  self.complete(); // 选择当前提示项并插入到编辑器中
                  self.close(); // 关闭代码提示列表
                });
              },
            };
          } else {
            return {
              text: item.text,
              displayText: item.displayText,
              ...(item.from && {
                from: item.from,
                to: item.to,
              }),
              render: (element: any, self: any) => {
                element.style.padding = '5px';
                const DIV = document.createElement('div');
                DIV.style.display = 'flex';
                DIV.style.justifyContent = 'space-between';
                const LEFT = document.createElement('span');
                // @ts-ignore
                const jsxEl: React.ReactElement = handleHighlight(
                  item.displayText,
                  word,
                );
                ReactDOM?.render(jsxEl, LEFT);
                // LEFT.innerHTML = item.displayText;
                const variable = varDataListFlatten.current.find(
                  (it) => it.key === item.text,
                );
                let RIGHT;
                if (variable?.widget) {
                  const { name, color, bgColor } =
                    widgetMapping[variable.widget] || {};
                  RIGHT = document.createElement('span');
                  RIGHT.className = 'tag';
                  RIGHT.innerHTML = name;
                  RIGHT.style.color = color;
                  RIGHT.style.backgroundColor = bgColor;
                } else if (item.customInfo?.widget) {
                  const { name, color, bgColor } =
                    widgetMapping[item.customInfo?.widget] || {};
                  RIGHT = document.createElement('span');
                  RIGHT.className = 'tag';
                  RIGHT.innerHTML = name;
                  RIGHT.style.color = color;
                  RIGHT.style.backgroundColor = bgColor;
                }
                DIV.appendChild(LEFT);
                if (RIGHT) DIV.appendChild(RIGHT);
                // if (firstFieldIndex === index) {
                //   const TITLE = document.createElement('div');
                //   TITLE.innerHTML = '当前表单字段';
                //   TITLE.style.padding = '5px';
                //   element.appendChild(TITLE)
                // }
                element.appendChild(DIV);
                element.addEventListener('click', function () {
                  self.complete(); // 选择当前提示项并插入到编辑器中
                  self.close(); // 关闭代码提示列表
                });
              },
            };
          }
        });

        if (completions.length) {
          return accept({
            list: completions,
            from: Cm.Pos(cursor.line, start),
            to: Cm.Pos(cursor.line, end),
          });
        } else {
          return accept(null);
        }
      }, 50);
    });
  };

  // 清除组件内容
  const onHandleClear = () => {
    editor.doc.setValue('');
  };

  useImperativeHandle(cRef, () => ({
    autoFormatSelection,
    // 获取编辑器使用到的函数公式名称, eg: [IF, SUM, CONCAT]
    getUsedFuncList() {
      const usedFuncList = [];
      const codeArr = _.cloneDeep(editor.getValue()).split('\n');
      if (Boolean(isUseFun) && funcDataListSort.length > 0) {
        const funcRegexp = new RegExp(
          funcDataListSort
            .map((data: any) => {
              return '\\b' + data.title + '\\b';
            })
            .join('|'),
          'g',
        );
        for (let i = 0; i < editor.doc.size; i++) {
          const lineStr = codeArr[i];
          let match: any;
          while ((match = funcRegexp.exec(lineStr)) !== null) {
            const variable = match[0];
            if (lineStr[match['index'] + variable.length] === '(') {
              const funcId = getFuncId(variable);
              if (funcDataListSimple[variable] && funcId) {
                usedFuncList.push(funcId);
              }
            }
          }
        }
      }
      return usedFuncList;
    },
    getEditor() {
      return editor;
    },
  }));

  function customLint() {
    return [];
  }

  return (
    <div
      className={
        from === 'copySend'
          ? 'qx-copy-send-cm ' + className
          : 'qx-formula-cm ' + className
      }
    >
      {/* @ts-ignore */}
      <CodeMirror
        editorDidMount={(editor) => {
          setEditor(editor);
          editor.addKeyMap({
            'Ctrl-f': autoFormatSelection,
          });
        }}
        value={(valueLocal || '').toString()}
        options={{
          mode: 'javascript', // 语言
          theme: 'idea',
          placeholder: '请输入函数',
          extraKeys: { Ctrl: 'autocomplete' }, //ctrl+空格自动提示配置
          hintOptions: {
            completeSingle: false,
            hint: hintCompletion,
            className: 'myCodeMirrorHint',
          },
          autofocus, //自动获取焦点
          matchBrackets: true, // 匹配括号
          autoCloseBrackets: true,
          lint: {
            getAnnotations: customLint,
          },
          readOnly: Boolean(readOnly),
          cursorHeight: Boolean(readOnly) ? 0 : 'auto',
          // 滚动（false，默认）或自动换行
          lineWrapping: true,
          styleActiveLine: true, // 光标行代码高亮
        }}
        // onKeyEvent={handleKeyEvent}
        // onBeforeChange={handleBeforeChange}
        // onCursorActivity={handleCursorActivity}
        // onCursor={onHandleCursor}
        onChange={onHandleChange}
      />
      {allowClear && value && (
        <CloseCircleFilled
          className={'qx-field-setter__clear'}
          onClick={onHandleClear}
        />
      )}
    </div>
  );
};
export default CodeEditor;