import React, { useEffect } from 'react';
import { Wcontainer, Wline } from '@alife/aisc-widgets';
import teamixTest, { pageCalculate, productCalculate } from '@teamix/testing-capability';
import { requestList, onceData, onceData2, onceData3, pageResults } from './data';

const InnerTest = () => {
  useEffect(() => {
    // 环境配置
    document.cookie = 'aliyun_lang=zh';
    document.cookie = 'aliyun_territory=CN';
    window.postMessage(
      {
        source: 'teamix-test-devtools',
        url: window.location.href,
        event: 'getModuleInfo',
        moduleName: '@teamix/doc-helper',
        moduleVersion: '1.33.14',
        moduleType: 'ApsaraStack',
        componentName: 'DocHelper',
      },
      '*',
    );
  }, []);

  useEffect(() => {
    setTimeout(async () => {
      const testA = await teamixTest({
        testItem: ['DESIGN'],
        ruleType: ['STANDARD'],
        element: '#test',
        theme: 'light',
        brand: 'default',
        language: 'zh-CN',
        uiPrefix: ['.next-'],
        proPrefix: ['.teamix-pro'],
        requestList,
        extendMap: {
          performanceInfo: {
            PCP: '3300',
          },
        },
      });

      console.log('单次数据 testA => ', testA);

      // 暗色&&英文
      const testB = await teamixTest({
        testItem: ['DESIGN'],
        ruleType: ['STANDARD'],
        element: '#test',
        theme: 'dark',
        brand: 'default',
        language: 'en-US',
        uiPrefix: ['.next-'],
        proPrefix: ['.teamix-pro'],
      });

      // // 亮色&&繁体
      const testC = await teamixTest({
        testItem: ['DESIGN'],
        ruleType: ['STANDARD'],
        element: '#test',
        theme: 'light',
        brand: 'amber', // 琥珀橙
        language: 'zh-TW',
        uiPrefix: ['.next-'],
        proPrefix: ['.teamix-pro'],
      });

      const testD = await teamixTest({
        testItem: ['PERFORMANCE'],
        ruleType: ['STANDARD'],
        extendMap: {
          performanceInfo: {
            PCP: '3300',
          },
        },
      });

      const testE = await teamixTest({
        testItem: ['PERFORMANCE'],
        ruleType: ['STANDARD'],
        extendMap: {
          performanceInfo: {
            PCP: ['5300', '2500'],
          },
        },
      });

      const testF = await teamixTest({
        testItem: ['PERFORMANCE'],
        ruleType: ['STANDARD'],
        extendMap: {
          performanceInfo: {
            PCP: ['5300', '2500', '1500', '500', '3500', '1600', '1880'],
          },
        },
      });
      // 单页多次测试数据合并计算
      const pageResult = pageCalculate([testA, testB, testC, testD, testE, testF]);
      console.log('单页数据 pageResult => ', pageResult);
      console.log(
        '未测试规则',
        pageResult.designInfo.filter((item: any) => item.errorRate === null),
      );
      // // 产品多页数据合并分析
      const productResult = productCalculate([pageResult, ...pageResults]);
      console.log('产品数据 productResult => ', productResult);
    }, 1000);
  }, []);

  return (
    <section
      id="test"
      style={{
        fontFamily:
          '-apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji',
      }}
    >
      <p className="next-menu next-var" style={{ fontFamily: 'sans-serif' }}>
        menu
      </p>
      <p className="fontFamily" style={{ fontFamily: 'sans-serif' }}>
        fontFamily: "sans-serif"
      </p>
      <p className="fontSize" style={{ fontSize: '13px' }}>
        fontSize: "13px"
      </p>
      <p className="fontWeight" style={{ fontWeight: 700 }}>
        fontWeight: 700
      </p>
      <p className="lineHeight" style={{ lineHeight: 1 }}>
        lineHeight: 1
      </p>
      <p className="color" style={{ color: '#FFF3EA' }}>
        我是主题颜色测试
      </p>
      <p
        className="borderColor1"
        style={{ border: '1px solid #ABCDEF', backgroundColor: '#ABCDEF' }}
      >
        我是边框测试1
      </p>
      <p className="borderColor2" style={{ borderTop: '1px solid #ABCDEF' }}>
        我是边框测试2
      </p>
      <p className="backgroundColor" style={{ backgroundColor: '#ABCDEF' }}>
        我是背景色测试
      </p>
      <p
        className="my-menu next-test my-ver"
        style={{ fontSize: '13px', backgroundColor: '#ABCDEF' }}
      >
        我是侧边栏测试
      </p>
      <p className="text0" style={{ color: '#ABCDEF' }}>
        12345一二，。、，。、九十
      </p>
      <p className="two-tone-illustration primary" style={{ color: '#CAE3FD' }}>
        <span>插画测试1</span>
      </p>
      <p className="two-tone-illustration amber" style={{ color: '#DB5B00' }}>
        <span>插画测试2</span>
      </p>
      <p className="text1">12345一二，。、，。、九十678更多汉字</p>
      <p className="text2">192.168.1.0</p>
      <p className="text3">http://www.aliyun.com</p>
      <p className="text4">a.b.c</p>
      <p className="next-div">next-div a.b.c</p>
      <p className="teamix-pro-page-header-title-name">proheaderName</p>
      <p className="teamix-pro-div">teamix-pro a.b.c</p>
      <p className="teamix-nav-console">teamix-nav-console</p>
      <p className="teamix-nav-console-sidebar">teamix-nav-console-sidebar</p>
      <table className="teamix-pro-table">
        <thead>
          <tr>
            <th>标题</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>666</td>
          </tr>
        </tbody>
      </table>
      <table>
        <thead>
          <tr>
            <th>标题</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>666</td>
          </tr>
        </tbody>
      </table>
      <form>
        <input type="text" />
      </form>
      <form>
        <input type="text" />
      </form>
      <canvas>1</canvas>
      <Wline
        height="300"
        data={[
          {
            name: '机房A',
            data: [
              [1483372800000, 1592],
              [1483459200000, 4092],
              [1483545600000, 3714],
              [1483632000000, 3984],
            ],
          },
          {
            name: '机房B',
            data: [
              [1483372800000, 3592],
              [1483459200000, 6092],
              [1483545600000, 5714],
              [1483632000000, 5984],
            ],
          },
        ]}
        config={{
          colors: ['#00FF95'],
        }}
      />
    </section>
  );
};

export default InnerTest;