import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import LoadingButton from "@mui/lab/LoadingButton";
import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";

import SQL, {
  ResultBlockTemplate,
  HtmlTooltip,
} from "@/components/Sections/RealTimeAnalytics/SQL";
import { UnifiedCodeDiffHighlight } from "@/components/CodeBlock";
import CustomCollapse from "@/components/Transform/Collapse";
import type { SQLResult as SQLResultType } from "@/pages/api/sql/run";
import {
  filterProductWithIndex,
  filterProductWithoutIndex,
} from "@/utils/mysqlCompatible";
import { Typography } from "@mui/material";

const SQL_CONTENT = `SELECT
product_id, product_name, price, category_code
FROM products
WHERE
brand_id = (SELECT brand_id FROM brands WHERE brand_name = 'nike')
ORDER BY price DESC
LIMIT 10;`;

const SQL_CONTENT_WITHOUT_IDX = `SELECT
/*+ IGNORE_INDEX(products, idx_p_on_brand_id, idx_p_on_price), READ_FROM_STORAGE(tikv[products]) */
product_id, product_name, price, category_code
FROM products
WHERE
brand_id = (SELECT brand_id FROM brands WHERE brand_name = 'nike')
ORDER BY price DESC
LIMIT 10;`;

export default function QueryWithIdxContent() {
  const [sql1Result, setSql1Result] = React.useState<SQLResultType | null>(
    null
  );
  const [sql2Result, setSql2Result] = React.useState<SQLResultType | null>(
    null
  );
  const [sql1loading, setSql1Loading] = React.useState(false);
  const [sql2loading, setSql2Loading] = React.useState(false);
  const [sql1ErrorMsg, setSql1ErrorMsg] = React.useState("");
  const [sql2ErrorMsg, setSql2ErrorMsg] = React.useState("");

  const runSQL1 = async () => {
    setSql1Loading(true);
    setSql1ErrorMsg("");
    try {
      const result = await filterProductWithIndex();
      setSql1Result(result);
    } catch (error: any) {
      console.error(error);
      setSql1ErrorMsg(`${error?.message}\n${error?.sqlMessage}`);
    } finally {
      setSql1Loading(false);
    }
  };

  const runSQL2 = async () => {
    setSql2Loading(true);
    setSql2ErrorMsg("");
    try {
      const result = await filterProductWithoutIndex();
      setSql2Result(result);
    } catch (error: any) {
      console.error(error);
      setSql2ErrorMsg(`${error?.message}\n${error?.sqlMessage}`);
    } finally {
      setSql2Loading(false);
    }
  };

  const handleRunSQL = async () => {
    return await Promise.all([runSQL1(), runSQL2()]);
  };

  return (
    <Grid container xs={12} minWidth={800}>
      <Grid xs={12}>
        <LoadingButton
          size="small"
          variant="contained"
          startIcon={<PlayArrowIcon />}
          onClick={handleRunSQL}
          loading={sql1loading || sql2loading}
        >
          Run SQL
        </LoadingButton>
      </Grid>
      <Grid xs={12}>
        {/* <CustomCollapse collapsedSize={40} defaultChecked> */}
        <Box
          pb={3}
          sx={{
            background: "#FFFFFF",
            border: "1px solid #EAEAEA",
            borderRadius: "6px",
            padding: "16px",
          }}
        >
          <UnifiedCodeDiffHighlight
            language="sql"
            text={SQL_CONTENT}
            wrapLines
          />
        </Box>
        {/* </CustomCollapse> */}
      </Grid>
      <Grid xs={6}>
        <ResultBlockTemplate
          title="Without Index"
          data={sql2Result}
          loading={sql2loading}
          errorMsg={sql2ErrorMsg}
          afterIcon={
            <HtmlTooltip
              title={
                <>
                  📍 Here we ignored the specified idx_on_p_brand_id index via{" "}
                  <Typography
                    component="a"
                    fontSize='inherit'
                    href={`https://docs.pingcap.com/tidb/stable/optimizer-hints?#ignore_indext1_name-idx1_name--idx2_name-`}
                    target="_blank"
                    sx={{
                      textDecoration: "underline",
                    }}
                  >
                    IGNORE_INDEX
                  </Typography>{" "}
                  hint.
                </>
              }
            >
              <InfoOutlinedIcon fontSize="inherit" />
            </HtmlTooltip>
          }
        />
      </Grid>
      <Grid xs={6}>
        <ResultBlockTemplate
          title="With Index"
          data={sql1Result}
          loading={sql1loading}
          errorMsg={sql1ErrorMsg}
        />
      </Grid>
    </Grid>
  );
}