import React, { useEffect } from 'react';
import { AreaSpline, LineBar, MinArea, doubleY } from './index';
import RenderChart from '../RenderChart';

import Highcharts from 'highcharts';
window.Highcharts = Highcharts;

const Demo: React.FC<{}> = () => {
  const op = AreaSpline({
    series:[
      {
        name: '小张',
        data: [3, 4, 3, 5, 4, 10, 12],
        after: 'mm',
        th: '自定义的标题',
      },
      {
        name: '小潘',
        data: [1, 3, 4, 3, 3, 5, 4]
      }
    ],
    yPlotLines:[{
			value: 9,
      text: '平均值',
    }],
    yTitle: {text: '入口名称', x: 25, y: 10},
    yLabelsFormat: '{value}%',
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

  return <RenderChart option={op} />;
};

const Demo11: React.FC<{}> = () => {
  const op = AreaSpline({
    series:[
      {
        name: '小张',
        data: [3, 4, 3, 5, 4, 10, 12],
        after: 'mm',
        th: '自定义的标题',
        tipFormatter: '<div>入口曝光uv: 5,655<br />入口曝光uv: 5,655</div>'
      },
      {
        name: '小潘',
        data: [1, 3, 4, 3, 3, 5, 6],
        tipFormatter: '<div>入口曝光uv: 5,655<br />入口曝光uv: 5,655</div>'
      }
    ],
    tipFmt: 'formatter2',
    yPlotLines:[{
			value: 9,
      text: '平均值',
      x: -100,
      y: -150
    }],
    yTitle: '入口名称',
    yLabelsFormat: '{value}%',
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

  return <RenderChart option={op} />;
};

const Demo2: React.FC<{}> = () => {
  const op = LineBar({
    lineSeries:[
      {
        name: '小张',
        data: [3, 4, 3, 5, 4, 10, 12]
      },
      {
        name: '小潘',
        data: [1, 3, 4, 3, 3, 5, 4]
      }
    ],
    tipFmt: 'formatter2',
    lineYPlotLines:[{
			value: 9,
      text: '平均值',
    }],
    barYPlotLines:[{
      value: 66,
      color: 'red',
      text: '平均值2',
    }],
    barSeries: [{
      name: '小明',
      tipFormatter: '<div>入口曝光uv: 5,655<br />入口曝光uv: 5,655</div>',
      data: [53, 45, 63, 75, 48, 86, 52],
      after: 'css'
    }],
    yTitle: ['入口名称', '入口名称2'],
    yLabelsFormat: ['{value}cc', '{value}dd'],
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

  return <RenderChart option={op} />;
};

const Demo3: React.FC<{}> = () => {
  const op = MinArea({
    series:[
      {
        data: [3, 4, 3, 5, 4, 10, 12],
        name: '小明'
      }
    ],
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

  return <div style={{ padding: 100 }}><RenderChart style={{width: 200, height: 80 }} option={op} /></div>;
};

const Demo4: React.FC<{}> = () => {
  const op = doubleY({
    leftYData:[
      {
        name: '小张',
        data: [3, 4, 3, 5, 4, 10, 12],
        type: 'areaspline',
        th: '大家诶我',
      },
      {
        name: '小潘',
        data: [1, 3, 4, 3, 3, 5, 4],
        type: 'areaspline'
      }
    ],
    rightYData: [
      {
        name: '小明',
        data: [53, 45, 63, 75, 48, 86, 52],
        after: 'css',
        type: 'column'
      },
      {
        name: '平均值',
        data: [50, 50, 50, 50, 50, 50, 50],
        type: 'line',
        dashStyle: 'ShortDash'
      }
    ],
    leftYPlotLines:[{
			value: 9,
      text: '平均值',
    }],
    rightYPlotLines:[{
      value: 66,
      color: 'red',
      text: '平均值2',
    }],
    yTitle: [{text: '入口名称', x: 25}, '入口名称2'],
    yLabelsFormat: ['{value}cc', '{value}dd'],
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

  return <RenderChart option={op} />;
};

const Demo5: React.FC<{}> = () => {
  const op = AreaSpline({
    series:[
      {
        name: '小张',
        data: [3, 4, 3, 5, 4, 10, 12],
        tipHead(e: any) {
          return `<th>标题</th><th>X轴${e.x}</th>`;
        },
        tipBody(e: any) {
          return e.points.map((val: any) => (
            `
              <tr>
                <td>${val.series.name}</td>
                <td>${val.y}</td>
              </tr>
            `
          )).join('')
        }
      },
      {
        name: '小潘',
        data: [1, 3, 4, 3, 3, 5, 4]
      }
    ],
    categories: [ '周一','周二','周三','周四','周五','周六','周日' ]
  });

  return <RenderChart option={op} />;
};
export { Demo, Demo11, Demo2, Demo3, Demo4, Demo5 };