import { RefObject, useEffect, useLayoutEffect, useState } from 'react';
import { RGBColor } from 'react-color';
import $dict from 'src/utils/dict';

// 生成uuid
function uuid(len: number, radix: number) {
  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  let uuid = [],
    i;
  radix = radix || chars.length;

  if (len) {
    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
  } else {
    let r;
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
    uuid[14] = '4';

    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | (Math.random() * 16);
        uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
      }
    }
  }

  return uuid.join('');
}

// 将rgba字符串对象转化为rgba对象
function rgba2Obj(rgba = '') {
  let reg = /rgba\((\d+),(\d+),(\d+),(\d+)\)/g;
  let rgbaObj: RGBColor = { r: 0, g: 0, b: 0, a: 0 };

  rgba.replace(reg, (_m, r, g, b, a) => {
    rgbaObj = { r, g, b, a };
    return rgba;
  });
  return rgbaObj;
}

export { uuid, rgba2Obj };

export const isDev = process.env.NODE_ENV === 'development';

export function useGetRect() {
  const [rect, setRect] = useState({ width: 0, height: 0 });
  useEffect(() => {
    setRect({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  }, []);
  return rect;
}

export function useGetScrollBarWidth(ref: RefObject<HTMLElement>) {
  const [width, setWidth] = useState(0);
  useLayoutEffect(() => {
    if (ref.current) {
      const diff = ref.current.offsetWidth - ref.current.clientWidth;
      setWidth(diff);
    }
  }, [ref]);
  return width;
}

export function useAnimation(state: boolean, delay: number) {
  const [display, setDisplay] = useState(false);
  useEffect(() => {
    let timer: number;
    if (state && display === true) {
      setDisplay(false);
    } else if (!state && display === false) {
      timer = window.setTimeout(() => {
        setDisplay(true);
      }, delay);
    }
    return () => {
      window.clearTimeout(timer);
    };
  }, [delay, display, state]);
  return [display, setDisplay];
}

export function unParams(params = '?a=1&b=2&c=3') {
  let obj: any = {};
  params &&
    // eslint-disable-next-line no-useless-escape
    params.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g, (m, a, b, c): any => {
      if (b || c) obj[b] = c;
    });
  return obj;
}

export function throttle(fn: Function, delay: number) {
  let flag = true;
  return (...args: any) => {
    if (flag) {
      flag = false;
      fn(...args);
      setTimeout(() => {
        flag = true;
      }, delay);
    }
  };
}

export function formatTime(fmt: string, dateObj: any) {
  const date = dateObj || new Date();
  const o: any = {
    'M+': date.getMonth() + 1, //月份
    'd+': date.getDate(), //日
    'h+': date.getHours(), //小时
    'm+': date.getMinutes(), //分
    's+': date.getSeconds(), //秒
    'q+': Math.floor((date.getMonth() + 3) / 3), //季度
    S: date.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length),
      );
    }
  }
  return fmt;
}

export function nodeToString(node, type) {
  //createElement()返回一个Element对象
  let tmpNode = document.createElement("div");
  //appendChild()  参数Node对象   返回Node对象  Element方法
  //cloneNode()  参数布尔类型  返回Node对象   Element方法
  tmpNode.appendChild(node.cloneNode(true));
  let str = tmpNode.innerHTML;
  tmpNode = node = null; // prevent memory leaks in IE
  if (type === 'wapContainer') {
    str = str.replace(/(\d+)px/g, function (val, group) {
      // wap编辑器宽是大于750px的，生成的样式转换成rem要/100，参考 “document.documentElement.clientWidth > 750”
      return group / 100 + 'rem'
    })
  }
  return `<div id=${type}>${str}<div>`;
}

const getMeiQiaScript = (online_consult, type) => {
  var html = '';
  if (online_consult != 1) {
    return html;
  }
  html = '<script type="text/javascript">    \n' +
    '    (function(m, ei, q, i, a, j, s) {\n' +
    '        m[a] = m[a] || function() {\n' +
    '            (m[a].a = m[a].a || []).push(arguments)\n' +
    '        };\n' +
    '        j = ei.createElement(q),\n' +
    '            s = ei.getElementsByTagName(q)[0];\n' +
    '        j.async = true;\n' +
    '        j.charset = \'UTF-8\';\n' +
    '        j.src = i + \'?v=\' + new Date().getUTCDate();\n' +
    '        s.parentNode.insertBefore(j, s);\n' +
    '    })(window, document, \'script\', \'//static.meiqia.com/dist/meiqia.js\', \'_MEIQIA\');\n' +
    '    _MEIQIA(\'entId\', \'28344\');\n' +
    '</script>';

  if (type == 'wap') {
    html += '<div class="top_icon show" style="bottom:70px"><a class="meiqia icon-pinglun2 iconfont" onclick="_MEIQIA(\'showPanel\')"></a></div>'
  }
  return html;
}

const getScript = (client?: any) => {
  return client == 'wap' ? '<script type="text/javascript" src="https://static.liweijia.com/liweijia/pc/common/common.js"></script>\n' : '\n'
}
const getBanner = (client?: any) => {
  return client == 'wap' ?
    '            for(var i=0;i<100;i++){\n' +
    '            $common.banner({\n' +
    '                name: ".banner"+i,\n' +
    '                addlit: true,\n' +
    '                preNext: true,\n' +
    '                ulodd: true,\n' +
    '                mode: true\n' +
    '            });\n' +
    '            };\n'
    :
    '            for(var i=0;i<100;i++){\n' +
    '            $api.banner({\n' +
    '                name: ".banner"+i,\n' +
    '                addlit: true,\n' +
    '                preNext: true,\n' +
    '                ulodd: true,\n' +
    '                mode: true\n' +
    '            });\n' +
    '            };\n'
}

const getFormScript = (client, title) => {
  const system = localStorage.getItem(`SITE-ALL${SITE_VERSION}`)
  const _system = system ? JSON.parse(system) : {}
  const _category = `${_system.name}-${title}(${client == 'wap' ? "WAP" : "PC"})`;
  var html = '<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>\n' +
    '<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>\n' +
    getScript(client) +
    '<script type="text/javascript" src="https://static.liweijia.com/liweijia/pc/common/js/SpecialRegAct.js"></script>\n' +
    '<script type="text/javascript" src="https://static.liweijia.com/liweijia/pc/common/js/commonApi.js"></script>\n' +
    '<script type="text/javascript">\n' +
    '$(window).load(function () {\n' +
    ' $(".callService_meiqia_liweijia").click(function (e) {\n' +
    '    e.preventDefault();\n' +
    '    e.stopPropagation();\n' +
    '    _MEIQIA("showPanel");\n' +
    '})\n' +
    getBanner(client) +
    '        $("i.za-icon--broadcast svg").append("<svg id=\'broadcast\' viewBox=\'0 0 1084 1024\'><path d=\'M879.013647 918.287059c-9.426824 0-18.853647-3.282824-26.443294-9.878588a39.544471 39.544471 0 0 1-3.764706-56.109177c80.564706-91.075765 155.105882-195.252706 155.105882-340.540235 0-145.257412-74.541176-249.494588-155.105882-340.48a39.574588 39.574588 0 0 1 3.764706-56.169412 40.417882 40.417882 0 0 1 56.621176 3.644235C995.779765 216.576 1084.235294 339.727059 1084.235294 511.789176c0 172.032-88.545882 295.213176-175.013647 392.944942a40.357647 40.357647 0 0 1-30.208 13.552941z m-136.613647-135.077647c-8.101647 0-16.323765-2.409412-23.401412-7.469177a39.604706 39.604706 0 0 1-9.216-55.567059l15.932236-21.564235c41.562353-55.808 77.432471-104.056471 77.43247-186.88 0-85.835294-31.804235-127.457882-72.101647-180.163765-7.137882-9.306353-14.215529-18.672941-21.263059-28.310588a39.574588 39.574588 0 0 1 9.216-55.567059 40.357647 40.357647 0 0 1 56.079059 9.125647c6.565647 9.125647 13.342118 18.010353 20.028235 26.744471 43.429647 56.892235 88.304941 115.712 88.304942 228.201412 0 108.965647-49.392941 175.435294-93.06353 234.134588l-15.299765 20.781177c-7.830588 10.842353-20.148706 16.534588-32.647529 16.534588zM120.470588 314.277647a40.056471 40.056471 0 0 0-40.146823 39.755294v315.392c0 21.955765 18.040471 39.785412 40.146823 39.785412h120.470588c10.631529 0 20.871529 4.186353 28.370824 11.655529l241.001412 200.432942c4.276706 4.216471 8.131765 7.710118 11.715764 10.661647V91.557647a189.289412 189.289412 0 0 0-11.776 10.721882l-240.941176 200.282353c-7.529412 7.529412-17.739294 11.685647-28.370824 11.685647H120.470588zM540.129882 1024c-26.292706 0-52.886588-18.100706-86.528-46.411294L224.316235 788.781176H120.470588c-66.409412-0.030118-120.470588-53.549176-120.470588-119.386352V354.032941C0 288.225882 54.061176 234.676706 120.470588 234.676706h103.845647l229.165177-188.656941C487.243294 17.287529 513.385412 0 539.919059 0 568.711529 0 602.352941 19.456 602.352941 74.149647v875.218824C602.352941 1004.453647 568.832 1024 540.129882 1024z\'></path></svg>");\n' +
    '        var _SpecialRegAct = new SpecialRegAct();\n' +
    '        $(\'[name="btnSubmit"]\').click(function (event) {\n' +
    '            _SpecialRegAct.Rerver("' + _category + '", $(this).closest("form"));\n' +
    '        });\n' +
    '    var TabList=["/taro/pages/home/index","/pages/index/index","/pages/custom-product/index","/pages/cart/index","/pages/user/user/index","/pages/user/index/index","/pages/discovery/index/index"];\n' +
    '    $(function () {\n' +
    '                $(\'a\').click(function (e) {\n' +
    '                  if ($(this).attr(\'data-wxdizhi\')) {\n' +
    '                     if(window.__wxjs_environment === "miniprogram" || /miniProgram/i.test(navigator.userAgent.toLowerCase())){      \n' +
    '                     e.preventDefault();\n' +
    '                     e.stopPropagation();\n' +
    '                     }\n' +
    '                     if (TabList.includes($(this).attr(\'data-wxdizhi\'))) {\n' +
    '                        wx.miniProgram.switchTab({\n' +
    '                           url: $(this).attr(\'data-wxdizhi\')\n' +
    '                        })\n' +
    '                     } else {\n' +
    '                        wx.miniProgram.navigateTo({\n' +
    '                           url: $(this).attr(\'data-wxdizhi\')\n' +
    '                        })\n' +
    '                     }\n' +
    '                  }\n' +
    '               });\n' +
    '           document.querySelectorAll("a").forEach(function (val) {\n' +
    '           if($(val).attr("href")=="javascript:void(0);" || $(val).attr("href")=="javascript:;" ){ \n' +
    '             $(val).css("cursor","default")}\n' +
    '           })\n' +
    '           })\n' +
    '}\n' +
    ')\n' +
    '</script>';
  return html;
}


export const createHtml = ($bodyHtml, pageConfigInfo, client) => {
  var html = '<!DOCTYPE html>\n' +
    '<html>\n' +
    '<head>\n' +
    '    <meta charset="utf-8" />\n' +
    '    <meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">\n' +
    '    <title></title>\n' +
    '    <meta name="keywords" content="">\n' +
    '    <meta name="description" content="">\n' +
    '     <link rel="stylesheet" href="https://static.liweijia.com/liweijia/pc/common/zarm.min.css"> \n' +
    '     \n' +
    '      <script type="text/javascript">   \n' +
    '  if (document.documentElement.clientWidth > 750) { \n' +
    '    document.documentElement.style.fontSize = "100px"; \n' +
    '  } else { \n' +
    '      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px"; \n' +
    '  } \n' +
    '    </script>\n' +
    '    <style type="text/css">\n' +
    '        body,html{ width: 100%; height: 100%;  padding: 0; margin: 0;}\n' +
    '        div.act_top{display: none !important;}\n' +
    '        #pcContainer{margin: 0 auto;width: 1200px;text-align:center}\n' +
    '        .home_banner{display: block !important;}\n' +
    '        .sepcForm{display: block !important;}\n' +
    '        .__home_banner__{display: none !important;}\n' +
    '        .__sepcForm__{display: none !important;}\n' +
    '        #__formWrap__{pointer-events: inherit !important;}\n' +
    '  #LWJ_BASE_MODULEbanner {\n' +
    '    position: relative;\n' +
    '    background: url("http://webimg.liweijia.com/liweijia/pc/common/images/loading.gif") center center no-repeat transparent;\n' +
    '    z-index: 5;\n' +
    '    width: 1200px;\n' +
    '    height: inherit;\n' +
    '    zoom: 1;\n' +
    '    overflow: hidden;\n' +
    '}\n' +
    '   .za-cell__inner{padding:0 !important;}\n' +
    '  #LWJ_BASE_MODULEbanner.wapbanner {\n' +
    '    width: 100%;\n' +
    '}\n' +
    '#LWJ_BASE_MODULEbanner li {\n' +
    '    position: absolute;\n' +
    '    left: 0;\n' +
    '    top: 0;\n' +
    '    height: 100%;\n' +
    '    background: center top no-repeat;\n' +
    '    z-index: 5;\n' +
    '    width: 100%;\n' +
    '    zoom: 1;\n' +
    '      overflow: hidden;\n' +
    '  }\n' +
    '  #LWJ_BASE_MODULEbanner li>a {\n' +
    '      display: block;\n' +
    '      line-height: 999;\n' +
    '      margin: 0;\n' +
    '      padding: 0;\n' +
    '  }\n' +
    ' #LWJ_BASE_MODULEbanner .ulodd {\n' +
    '     position: absolute;\n' +
    '     bottom: 20px;\n' +
    '     left: 50%;\n' +
    '     transform: translateX(-50%);\n' +
    '     z-index: 6;\n' +
    '     width: 100%;\n' +
    '     text-align: center;\n' +
    ' }\n' +
    ' #LWJ_BASE_MODULEbanner .ulodd a {\n' +
    '    display: inline-block;\n' +
    '    width: 10px;\n' +
    '    height: 10px;\n' +
    '    background: #fff;\n' +
    '    margin: 0 5px;\n' +
    '    border-radius: 20px;\n' +
    '    -moz-border-radius: 20px;\n' +
    '     -webkit-border-radius: 20px;\n' +
    '    -o-border-radius: 20px;\n' +
    '     -ms-border-radius: 20px;\n' +
    '     -khtml-opacity: .5;\n' +
    '     -moz-opacity: .5;\n' +
    '     opacity: .5;\n' +
    '     filter: alpha(opacity=50);\n' +
    '     cursor: pointer;\n' +
    ' }\n' +
    ' #LWJ_BASE_MODULEbanner .ulodd a.ayes, #LWJ_BASE_MODULEbanner .ulodd a:hover {\n' +
    '    opacity: 1;\n' +
    '}\n' +
    '#LWJ_BASE_MODULEbanner .pre {\n' +
    '    background: url("http://webimg.liweijia.com/liweijia/pc/common/images/icon.png") no-repeat;\n' +
    '     background-position: -128px -274px;\n' +
    '    width: 20px;\n' +
    '   height: 50px;\n' +
    '   cursor: pointer;\n' +
    '     position: absolute;\n' +
    '   z-index: 50;\n' +
    '   zoom: 1;\n' +
    '    left: 50%;\n' +
    '   top: 50%;\n' +
    '    margin-left: -550px;\n' +
    '    background-color: initial;\n' +
    '      margin-top: -25px;\n' +
    '}\n' +
    '#LWJ_BASE_MODULEbanner.wapbanner .pre {\n' +
    '    margin-left: -3.4rem;\n' +
    '}\n' +
    ' #LWJ_BASE_MODULEbanner .next {\n' +
    '     background: url("http://webimg.liweijia.com/liweijia/pc/common/images/icon.png") no-repeat;\n' +
    '    background-position: -103px -274px;\n' +
    '    width: 20px;\n' +
    '    height: 50px;\n' +
    '    cursor: pointer;\n' +
    '    position: absolute;\n' +
    '    z-index: 50;\n' +
    '    zoom: 1;\n' +
    '    left: 50%;\n' +
    '    top: 50%;\n' +
    '    margin-left: 525px;\n' +
    '    background-color: initial;\n' +
    '    margin-top: -25px;\n' +
    ' }\n' +
    '#LWJ_BASE_MODULEbanner.wapbanner .next {\n' +
    '    margin-left: 40%;\n' +
    '}\n' +
    '       @keyframes za-notice-bar-scrolling {\n' +
    '           0% {\n' +
    '               transform: translateX(0px);\n' +
    '               -webkit-transform: translateX(0px);\n' +
    '           }\n' +
    '           100% {\n' +
    '               transform: translateX(-100%);\n' +
    '               -webkit-transform: translateX(-100%);\n' +
    '           }\n' +
    '       }\n' +
    '       @-webkit-keyframes za-notice-bar-scrolling {\n' +
    '           0% {\n' +
    '               transform: translateX(0px);\n' +
    '               -webkit-transform: translateX(0px);\n' +
    '           }\n' +
    '           100% {\n' +
    '               transform: translateX(-100%);\n' +
    '               -webkit-transform: translateX(-100%);\n' +
    '       }\n' +
    '    </style>\n' +
    '</head>\n' +
    '<body>\n';

  html += $bodyHtml;
  html += getMeiQiaScript(pageConfigInfo?.online_consult, client);
  html += getFormScript(client, pageConfigInfo?.title);
  html += '</body>';
  html += '</html>\n';

  html = html.replace(/contenteditable="true"/g, "contenteditable='false'");
  return html;
}

export const getLink = url => {
  return (url.indexOf('http://') > -1 || url.indexOf('https://') > -1) ? url : `http://${url}`
}

export const makeAssetGroupTreeData = (data, pid = 0, allData?: any[]) => {
  if (!allData) allData = data
  return data?.filter(i => i.pid == pid).map((item) => {
    const children = makeAssetGroupTreeData(allData.filter(i => i.pid.toString() === item.id.toString()), item.id, allData)
    if (children.length === 0) {
      return {
        url:item.url,
        value: item.id.toString(),
        title: item.title,
        type: item.type,
        key:item.id,
        path:item.path
      }
    }
    return {
      url:item.url,
      value: item.id.toString(),
      title: item.title,
      key:item.id,
      type: item.type,
      path:item?.path,
      children
    }
  })
}