import React, { useEffect, useState } from 'react';

import { FunctionProps } from '../index';

type DescProps = {
  scriptEdit: boolean;
  funcData: FunctionProps | undefined | null;
};

const highLightFunc = (str: string | undefined, func: string) => {
  if (!str) return '';
  const startIndex = str.indexOf(func);
  const endIndex = startIndex + func.length;
  if (startIndex > -1) {
    return (
      <>
        <span>{str.slice(0, startIndex)}</span>
        <span className="highlight">{func}</span>
        <span>{str.slice(endIndex)}</span>
      </>
    );
  } else {
    return str;
  }
};

const DescBox: React.FC<DescProps> = ({ scriptEdit, funcData }) => {
  const defaulTips = () => {
    return (
      <ul className={'fx-ul'}>
        <li className="line">从左侧面板选择函数和变量，或输入函数</li>
        <li className="line">公式编辑示例：PRODUCT(单价, 数量)</li>
        <li
          className="line"
          dangerouslySetInnerHTML={{
            __html:
              '支持运算符：加（+）、减（-）、乘（*）、除（/）、大于（>）、小于（<）、等于（==）、不等于（!=）、大于等于（>=）、小于等于（<=）',
          }}
        ></li>
        <li className="line">支持用"."来获取对象/对象数组的属性</li>
      </ul>
    );
  };

  const scriptTips = () => {
    return (
      <ul className={'fx-ul'}>
        <li className="line">
          支持JavaScript ES5标准语法，请在函数头部定义变量接受字段动态值
        </li>
        <li className="line">脚本需要有‘return’ 关键字显式的返回数据类型</li>
        <li className="line">每行最大支持1000字符，最多支持2000行</li>
      </ul>
    );
  };

  const fxTips = () => {
    const { title, desc, formula, returnType, demon, funcNameEg } =
      funcData || {};
    return (
      <>
        <div className="line">
          <span style={{ fontWeight: 600 }}>描述</span>：
          <span className="highlight">{title}</span>
          {desc}
        </div>
        <div className="line">
          <span style={{ fontWeight: 600 }}>表达式</span>：
          {highLightFunc(formula, funcNameEg)}
        </div>
        <div className="line">
          <span style={{ fontWeight: 600 }}>返回值类型</span>：{returnType}
        </div>
        <div className="line">
          <span style={{ fontWeight: 600 }}>示例</span>：
          {highLightFunc(demon, funcNameEg)}
        </div>
      </>
    );
  };

  const [tips, setTips] = useState<any>(null);
  useEffect(() => {
    let tips = !!funcData ? fxTips() : scriptEdit ? scriptTips() : defaulTips();
    setTips(tips);
  }, [scriptEdit, funcData]);

  return (
    <div className="describle-box">
      <div className="title-bar">{funcData?.title}</div>
      <div className="desc-content">{tips}</div>
    </div>
  );
};

export default DescBox;