import React, { useEffect } from 'react';
import teamixTest, { pageCalculate, productCalculate } from '@teamix/testing-capability';

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

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

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

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

      // 单页多次测试数据合并计算
      const pageResult = pageCalculate([testA, testB, testC]);
      console.log('单页数据 pageResult => ', pageResult);
      console.log(
        '未测试规则',
        pageResult.designInfo.filter((item: any) => item.errorRate === null),
      );
      // // 产品多页数据合并分析
      const productResult = productCalculate([pageResult]);
      console.log('产品数据 productResult => ', productResult);
    }, 2000);
  }, []);

  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',
      }}
    >
      <div className="teamix-nav-console">Nav</div>
      <div className="next-message" style={{ width: window.innerWidth }}>
        <div className="next-message-content">
          message
        </div>
      </div>
      <div className="next-message" style={{ width: window.innerWidth }}>
        <div className="next-message-content">
          message2
        </div>
      </div>

      <p className="next-div">next-div a.b.c</p>
      <p className="teamix-pro-page-header-title-name">proheaderName</p>

    </section>
  );
};

export default InnerTest;