import * as React from "react";
import Box from "@mui/material/Box";
import ReactEcharts from "echarts-for-react";
import Switch from "@mui/material/Switch";

export default function ARTComparisonChart(props: { checked?: boolean }) {
  const { checked = false } = props;

  const optionMemo = React.useMemo(() => {
    const _rawData = generateData();
    const dbList = ["TiDB", "MySQL"];
    const datasetWithFilters: echarts.DatasetComponentOption[] = [];
    const seriesList: echarts.SeriesOption[] = [];

    dbList.forEach((dbName) => {
      var datasetId = "dataset_" + dbName;
      datasetWithFilters.push({
        id: datasetId,
        fromDatasetId: "dataset_raw",
        transform: {
          type: "filter",
          config: {
            and: [
              { dimension: "data_size", gte: 0 },
              { dimension: "db", "=": dbName },
            ],
          },
        },
      });
      seriesList.push({
        type: "line",
        datasetId: datasetId,
        showSymbol: false,
        name: dbName,
        silent: true,
        endLabel: {
          show: true,
          formatter: function (params: any) {
            return params.value[0];
            // if (dbName === "TiDB") {
            //   return params.value[1] > 0.5 ? "😏" : "😐";
            // }
            // return params.value[2] > 0.5 ? "😨" : "😄";
          },
        },
        labelLayout: {
          moveOverlap: "shiftY",
        },
        emphasis: {
          focus: "series",
        },
        encode: {
          x: "data_size",
          y: "ART",
          label: ["Data Size", "Average Response Time"],
          itemName: "data_size",
          tooltip: ["ART"],
        },
        lineStyle: { color: dbName === "TiDB" ? "#0F8CFF" : "#EA3523" },
        ...(dbName === "MySQL" && {
          markPoint: {
            silent: true,
            label: {
              show: true,
              position: "insideBottom",
            },
            itemStyle: {
              color: "transparent",
            },
            animationDelay: 3000,
            data: !checked
              ? [
                  {
                    name: "The few data option(MySQL)",
                    value: "😄",
                    yAxis: 0.1,
                    xAxis: 0.5,
                  },
                ]
              : [
                  {
                    name: "The massive data option(MySQL)",
                    value: "😨",
                    yAxis: 4,
                    xAxis: 2,
                  },
                ],
          },
        }),
        ...(dbName === "TiDB" && {
          markPoint: {
            silent: true,
            label: {
              show: true,
              position: "insideBottom",
            },
            itemStyle: {
              color: "transparent",
            },
            data: !checked
              ? [
                  {
                    name: "The few data option(TiDB)",
                    value: "😐",
                    yAxis: 0.8,
                    xAxis: 0.55,
                  },
                ]
              : [
                  {
                    name: "The massive data option(TiDB)",
                    value: "😄",
                    yAxis: 1.5,
                    xAxis: 2,
                  },
                ],
          },
        }),
        ...(dbName === "TiDB" && {
          markArea: {
            silent: true,
            itemStyle: {
              color: "transparent",
              borderWidth: 1,
              borderType: "dashed",
            },
            data: !checked
              ? [
                  [
                    {
                      name: "The few data option",
                      yAxis: 0.1,
                      xAxis: 0.2,
                    },
                    {
                      yAxis: 5,
                      xAxis: 0.9,
                    },
                  ],
                ]
              : [
                  [
                    {
                      name: "The massive data option",
                      yAxis: 1,
                      xAxis: 1.7,
                    },
                    {
                      yAxis: 6,
                      xAxis: 2.4,
                    },
                  ],
                ],
          },
          markLine: {
            symbol: "none",
            silent: true,
            data: [
              [
                {
                  // name: "Markline between two points",
                  coord: [1, 0],
                },
                {
                  coord: [1, 1],
                },
              ],
              [
                {
                  // name: "Markline between two points",
                  coord: [0, 1],
                },
                {
                  coord: [1, 1],
                },
              ],
            ],
          },
        }),
      });
    });

    const customOption = {
      animationDuration: 2000,
      dataset: [
        {
          id: "dataset_raw",
          source: _rawData,
        },
        ...datasetWithFilters,
      ],
      // title: {
      //   text: "Income of Germany and France since 1950",
      // },
      // tooltip: {
      //   order: "valueDesc",
      //   trigger: "axis",
      // },
      xAxis: {
        type: "value",
        // nameLocation: "middle",
        name: "Data Size",
        splitLine: {
          show: false,
        },
        axisLabel: {
          // show: false,
          formatter: function (value: any, index: number) {
            if (value === 1) return "10 million rows of data";
            return "";
          },
        },
        axisLine: {
          symbol: ["none", "arrow"],
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        name: "Average Response Time",
        splitLine: {
          show: false,
        },
        axisLabel: {
          // show: false,
          formatter: function (value: any, index: number) {
            if (value === 1) return "5 ms";
            return "";
          },
        },
        axisLine: {
          show: true,
          symbol: ["none", "arrow"],
        },
        axisTick: {
          show: false,
        },
      },
      grid: {
        right: 80,
        left: 80,
      },
      series: seriesList,
    };
    return customOption;
  }, [checked]);

  return (
    <>
      <ReactEcharts option={optionMemo} />
    </>
  );
}

function exponentialOut(k: number) {
  return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
}
function exponentialIn(k: number) {
  return k === 0 ? 0 : Math.pow(1024, k - 1);
}
function quadraticIn(k: number) {
  return k * k;
}

function calcMysql(k: number) {
  return quadraticIn(k);
}

function calcTidb(k: number) {
  return Math.sqrt(k);
}

function generateData() {
  const data: any[] = [["db", "data_size", "ART"]];
  const N_POINT = 30;
  for (let i = 0; i <= N_POINT; i++) {
    const x = i * 0.1;
    const y1 = calcTidb(x);
    data.push(["TiDB", x, y1]);
    if (i < 25) {
      const y2 = calcMysql(x);
      data.push(["MySQL", x, y2]);
    }
  }
  return data;
}