import React, { useEffect, useState } from 'react';
import { useDocs, Link, useComponents, useMenus, useConfig } from 'docz';
import { useToggle } from 'react-use';
import './style.less';
import {iTheme, iThemeItem} from './type';

interface Props {
  style: string;
	oldTheme: string;
  // code: string;
  // title?: React.ReactNode;
  // desc?: React.ReactNode;
}

const MyTheme: React.FC<Props> = ({ style,oldTheme }) => {
  const [variables, setVariables] = useState<any>({});
  //生成theme 字典
	// theme = [{
	// 	commentary:小家主题
	// 	variables:[
	// 	{
	// 		key:string;
	// 		value:string;
	// 		desc:string|undefined;
	// 	}
	// ]
	// }]
	const [theme,setTheme] = useState<Array<iTheme>>([]);

  const [isEditVisible, toggleEditVisible] = useToggle(false);

  useEffect(() => {
    if ((window as any).theme === undefined) {
      const commentaryBlock = regCommentaryBlock();
      const tempTheme = commentaryBlock.map((item,index) => {
				//区块的变量
				return regSingleCommentaryAndVariable(item)
      });
			setTheme(tempTheme);
			(window as any).theme = tempTheme;
    } else {
			setTheme((window as any).theme);
    }
  }, []);

	useEffect(() => {
		let tempVariables = {};
		theme.forEach((item) => {
			tempVariables = {...tempVariables, ...item.tempVariables};
		});
		setVariables(tempVariables);
	},[theme])
  //获取注释块
  const regCommentaryBlock = () => {
    let regExp = /\/\*[\s\S]*?\n\s*\n/g;
    const matchAllResult = oldTheme.matchAll(regExp);
    const array = [...matchAllResult];
    console.log(array.length);
    return array.map((item) => {
      return item[0];
    });
  };
  //遍历主题块中找出多行注释 单行注释和变量
  const regSingleCommentaryAndVariable = (commentaryBlock: string) => {
    //块注释
    let blockCommentaryRegExp = /(\/\*[\s\S]*?\*\/)\n.*--/g;
    const blockCommentaryRegExpResult = commentaryBlock.matchAll(blockCommentaryRegExp);
    const blockCommentaryRegExpArray = [...blockCommentaryRegExpResult];
		let blockCommentary = blockCommentaryRegExpArray?.[0]?.[1]||'';

		//单行注释和变量
    let regExp = /(--[\s\S]*?);(\/\*.*\*\/)*/g;
    const matchAllResult = commentaryBlock.matchAll(regExp);
    const array = [...matchAllResult];
		const tempVariables:any = {};
    const themes =  array.map((item) => {
			const commentary = item[2];
			const variSplit = item[1].split(':');
			let variSplitKey = '';
			let variSplitValue = '';
			if (variSplit.length >= 2) {
        variSplitKey = variSplit[0].replaceAll('--', '');
        variSplitValue = variSplit[1].replaceAll(';', '');
      }
			tempVariables[variSplitKey] = {
					commentary: commentary,
					value: variSplitValue,
				};
			return {
				key: variSplitKey,
				value: variSplitValue,
				commentary: commentary,
			};
      //
      //可能匹配两种
      //背景色
      //--card-bg-color: #FFF;
      //或
      //--card-bg-color: #FFF;
      // if (item[2] !== undefined) {
      //   //第一种取值
      //   // console.log(item[0]); //匹配值
      //   // console.log(item[1]); //注释
      //   // console.log(item[2]); //变量
      //   const commentary = item[1];
      //   const variSplit = item[0].split(':');
      //   let variSplitKey = '';
      //   let variSplitValue;
      //   if (variSplitKey.length >= 2) {
      //     variSplitKey = variSplitKey[0].replaceAll('--','');
      //     variSplitValue = variSplitKey[1].replaceAll(';', '');
      //   }
      // 	tempVariables[variSplitKey] = {
      //       commentary: commentary,
      //       value: variSplitValue,
      //     };
      //   return {
      //     key: variSplitKey,
      //     value: variSplitValue,
      //     commentary: commentary,
      //   };
      // } else {
      //   //第二种取值
      //   // console.log(item[0]); //变量
      // 	const item0 = item[0];
      //   let item0Split = item0.split(':');
      //   let item0Key = '';
      //   let item0KeyValue;
      //   if (item0Split.length >= 2) {
      //     item0Key = item0Split[0].replaceAll('--','');
      //     item0KeyValue = item0Split[1].replaceAll(';', '');
      //   }
      // 	tempVariables[item0Key] = {
      //     key: item0Key,
      //     value: item0KeyValue,
      //     commentary: '',
      //   };
      //   return {
      //     key: item0Key,
      //     value: item0KeyValue,
      //     commentary: '',
      //   };
      // }
    });
		return {
			commentary:blockCommentary,
			variables:themes,
			tempVariables:tempVariables
		}
  };

  const getEditThemes = () => {
    let reg = /\(--(.*)\)/g;
    const matchAllResult = style.matchAll(reg);
    const array = [...matchAllResult];

    return array.map((item,index) => {
			const key = item[1] as string;
			const variable = variables[key];
			if (variable === undefined){
				return undefined;
			}

			//标题
			let title = item[1];
			//desc
			let desc = '';
			if (variable.commentary){
				const regEpx = /\/\*(.*)\*\//g;
				const result = regEpx.exec(variable.commentary);
				desc = result?.[1] || '';
			}
			let value = document.documentElement.style.getPropertyValue(`--${key}`);
			if (value === undefined || value === ''){
				value = variable.value;
			}
      return (
        <div className="theme-item" style={{ display: 'flex' }} key={key+index}>
          <div className="theme-item-title">{title}</div>
          <div className="theme-item-desc">{desc}</div>
          <input
            className="theme-item-input"
            defaultValue={value}
            type="text"
            onBlur={(e) => {
              document.documentElement.style.setProperty(`--${key}`, e.target.value);
              console.log(e.target.value);
            }}
          />
        </div>
      );
    });
  };
  return (
    <div className="my-theme">
      <div className="my-theme-header">
        <div></div>
        <div
				className='header-save'
          onClick={async () => {
						//保存主题 theme.css
						let themeCss = ':root {';
						theme.forEach((item)=>{
							themeCss = `${themeCss}

  ${item.commentary}`;
							item.variables.forEach((variable)=>{
								//保存属性值
								let value = variable.value;
								const modifyValue = document.documentElement.style.getPropertyValue(`--${variable.key}`);
								if (modifyValue){
									value = modifyValue;
								}
								themeCss = `${themeCss}
  --${variable.key}:${value};${variable.commentary??''}`;
							})
						});
						themeCss = `${themeCss}
}`;
					try {
						const a = document.createElement('a');
						a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(themeCss);
						a.download = 'theme.css';
						document.body.appendChild(a);
						await a.click();
						document.body.removeChild(a);
					} catch (error) {
						console.log(error);
					}
          }}
        >
          保存
        </div>
      </div>

      {theme.length > 0 ? getEditThemes() : undefined}
    </div>
  );
};

export default MyTheme;