import { Component } from 'react';
import { Input } from 'antd';
// import Taro from "@tarojs/taro";
// import {
//   View,
//   Text,
//   Image,
//   Button,
//   Input,
//   Editor,
//   Textarea,
// } from "@tarojs/components";
import './APP.scss';
// import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from 'react';
// import { AtGrid } from "taro-ui";
// import { Swiper, SwiperItem } from "@tarojs/components";
// import { AtCard } from "taro-ui";
// import { AtImagePicker } from "taro-ui";
// import { AtButton } from "taro-ui";
// import { AtSearchBar } from "taro-ui";
// import { Picker } from "@tarojs/components";
// import { AtList, AtListItem } from "taro-ui";
// import { AtNavBar } from "taro-ui";
// import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
// import { AtToast } from "taro-ui";
// import { AtIcon } from "taro-ui";
import see from '../../images/see.png';
import group from '../../images/group.png';
import { marked } from 'marked';
// import _ from "lodash";
import OriginMark from './conpoments/OriginMark/index';
import TextArea from 'antd/es/input/TextArea';

// marked.use(`marked-code-jsx-renderer`);
// marked.use(`marked-extended-tables`);

// ![测试图片2](http://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/202304081955211.png)

const markTextStr = `
  ## 标题
  > 测试引用桔子的样子
随便测试普通的文本,要不要来个\`内敛\`的字符串
   ---
   - 无序列表1
   个人有看看
  - 无序列表2
   - [ ] 任务列表
   - [x] 完成任务
   1. 测试111
   恶魔女哪里的请
   2. 你好啊
   3. iefw4t43t43t
   永远不要相信一个
   ---
   相信我
   `;

let tablecellArr = [];
let tableRowArr = [];
let maxLengthCell = null;
let bodydata = null;
let headerdata = null;
let maxWidths = null;

marked.setOptions({
  breaks: true, // 是否回车换行
  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
  // pedantic: true, //严格模式
  // highlight(code:any, lang:any) {
  //   //  语法高亮
  //   let val = code;
  //   if (lang) {
  //     val = hljs.highlight(lang, code).value;
  //   } else {
  //     val = hljs.highlightAuto(code).value;
  //   }
  //   return val;
  // },
});
// 符号
// 🔥❓👉
// 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟
// ©️⭐🔍〰️➖

// 修改 marked 的解析规则
const block = marked.Lexer.rules.block;
// block.gfm.hr = /^( *[-*_]){3,} *(?:\n+|$)/;
// 自定义水平线规则，确保它们在文档中被正确识别
block.gfm.hr =
  /^ {0,3}(?:(?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/;

const renderer = new marked.Renderer();
// const originRenderer = _.cloneDeep(renderer);

// 图片调整300px
renderer.image = function (href, title, text) {
  // console.log("href, title, text", href, title, text);
  // <div class="desc">${text}</div>
  return `<img width="300px"  src="${href}" alt="${text}"/>`;
};

// let  listSinbal="▫️ "
let listSinbal = '🔸';

// 有序列表
renderer.list = function (body, ordered, start) {
  // console.log("body,ordered, start", body, ordered, start);
  const type = ordered ? 'ol' : 'ul';
  // console.log("type===>", type);
  const startatt = ordered && start !== 1 ? ' start="' + start + '"' : '';
  // 正则取值
  // const regex = /▫️\s*(.*?)<br\/?>/g;
  const regex = /([^<]*)<br\/?>/g;
  const input = body;
  const matches = [...input.matchAll(regex)];
  const texts = matches.map((match) => match[1]);
  // 不含▫️的元素数量
  // const diffcCount=texts.length-texts.filter(item => item.includes('▫️')).length;
  // console.log("texts===>", texts); // 输出: ["测试111", "测试222", "if"]
  const newArray = texts.filter((item) => item.includes(listSinbal));
  // 0️⃣',
  const numbers = ['1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣', '6️⃣', '7️⃣', '8️⃣', '9️⃣', '🔟'];
  const string = texts
    .map((value, index) => {
      // console.log("value, index==>", value, index);
      // ${ value.indexOf("▫️ ") === -1 ? '<br/><span>111</sapn>' : ""}
      return value.indexOf(listSinbal) !== -1
        ? `<div>${
            type === 'ol' ? numbers[newArray.indexOf(value)] : listSinbal
          }${value.replace(listSinbal, '')} </div>`
        : `<div style="white-space:pre;">\t${value}</div>`;
    })
    .join('');
  // return `1️⃣`
  // console.log("string===>", string);

  return `${string}`;
};

// 无序列表  ▫️
renderer.listitem = function (text, task, checked) {
  // return `<li>${text}</li>\n`;
  return `${listSinbal}${text}<br/>`;
  // return `➖${text}<br/>`;
};

// 任务列表
renderer.checkbox = function (checked) {
  // ✅❌
  return !!checked ? '✅' : '❌';
  return (
    '<input ' + (checked ? 'checked="" ' : '') + 'disabled="" type="checkbox">'
  );
};

// 标题
renderer.heading = function (text, level, raw) {
  console.log('text, level, raw', text, level, raw);
  // ignore IDs
  // return `📋<span>${text}</span> <br/>`;
  return `🔥<span>${text}</span> <br/>`;
  // return `<h${level}>🔥<span>${text}</span></h${level}>\n`;
  // return `<h${level}>🔥${text}</h${level}><br/>`;
};

renderer.text = function (text) {
  return text;
};

// 分隔符
renderer.hr = function () {
  // return '<hr>\n';
  // return '➖➖➖➖➖<br/>';
  return '➖➖➖➖➖';

};

// 自定义分隔线解析规则
// marked.Lexer.rules.block.gfm.hr = /^(\*{3,}|-{3,}|_{3,})(?:\s*)$/;
//  hr = /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/;

// 内联样式,使用直角引号「」
renderer.codespan = function (text) {
  // return `「${text}」`;
  return `『${text}』`;
};

// 引用符号
renderer.blockquote = function (quote) {
  // console.log("quote", quote);
  let content = null;
  var regex = /<p>(.*?)<\/p>/;
  var str = quote;
  var match = regex.exec(str);
  if (match != null) {
    content = match[1]; // 获取第一个捕获组的内容
    // console.log(content);
  }
  // <pre></pre>
  // &nbsp;
  return `<span style="white-space:pre;" class="blockquote">\t 👉${content}</span><br/> `;
};

renderer.table = function (header, body) {
  if (body) body = `<tbody>${body}</tbody>`;

  return (
    '📊 表格 📊<br/><table>\n' +
    '<thead>\n' +
    header +
    '</thead>\n' +
    body +
    '</table>\n'
  );
};

renderer.tablerow = function (content) {
  return `<tr>\n${content}</tr>\n`;
};

renderer.tablecell = function (content, flags) {
  const type = flags.header ? 'th' : 'td';
  const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
  return tag + `|${content}` + `</${type}>\n`;
};

function cleanUrl(href: any) {
  try {
    href = encodeURI(href).replace(/%25/g, '%');
  } catch (e) {
    return null;
  }
  return href;
}

renderer.link = function (href, title, text) {
  const cleanHref = cleanUrl(href);
  if (cleanHref === null) {
    return text;
  }
  href = cleanHref;
  let out = '<a href="' + href + '"';
  if (title) {
    out += ' title="' + title + '"';
  }
  out += '>' + `🌐` + text + '</a>';
  // out += ">" +`🌐`+ text + "</a>"+`(${href})`;

  return out;
};

renderer.paragraph = function (text) {
  return `<p>${text}</p>\n`;
  // return `<p>${text}</p>`;

};
renderer.br = function () {
  return '<br>';
};
renderer.html = function (html, block) {
  return html;
};

// 使用拓展
marked.use({ renderer });

// export default class Index extends Component {
const Index = () => {
  const [inputValue, setinputValue] = useState('');
  const [markText, setmarkText] = useState(``);

  const [oldmarkText, setoldmarkText] = useState(null);
  const [currentRender, setcurrentRender] = useState(null);
  const [markdownTable, setmarkdownTable] = useState();
  const [tablecellArr, settablecellArr] = useState([]);

  const onConfirm = (onConfirmtxt: any) => {
    console.log('onConfirmtxt--->', onConfirmtxt.detail.value);
  };
  const onBlur = (onBlurtxt: any) => {
    console.log('onBlurtxt--->', onBlurtxt.detail.value);
    if (onBlurtxt.detail.value) {
      setmarkText(onBlurtxt.detail.value);
    }
  };
  const onInput = (onInputtxt: any) => {
    console.log('onInputtxt--->', onInputtxt?.target?.value);
    setinputValue(onInputtxt.target.value);
    // console.log('inputValue',inputValue)
    let value = onInputtxt?.target?.value;
    if (value) {
      setmarkText(value);
    }
  };

  useEffect(() => {}, []);

  return (
    <div className="index">
      <div className="left">
        <TextArea
          // styles="background:#fff;width:100%;min-height:80px;padding:0 30rpx;"
          className="TextArea"
          autoFocus
          allowClear
          onChange={onInput}
          showCount
        />
      </div>
      <div className="right">
        <div className="rightHtml" dangerouslySetInnerHTML={{ __html: marked(markText) }}></div>
      </div>

      {/* {markText ? (
        <div
          className="right"
          dangerouslySetInnerHTML={{ __html: marked(markText) }}
        ></div>
      ) : null} */}
      {/* <div className="origin">
        <OriginMark markText={markText} />
      </div> */}
    </div>
  );
};

export default Index;