import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import EditIcon from "@mui/icons-material/Edit";
import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useRecoilValue } from "recoil";
import { useSnackbar } from "notistack";
import CircleIcon from "@mui/icons-material/Circle";
import Chip from "@mui/material/Chip";
import SearchIcon from "@mui/icons-material/Search";

import {
  selectProductList,
  retrieveProductList,
  deleteProduct,
} from "@/utils/mysqlCompatible";
import { sessionState } from "@/recoil/atoms";
import { useInitCRUD } from "@/utils/hook";
import type { SQLResult as SQLResultType } from "@/pages/api/sql/run";

import {
  ActionTemplate,
  ResultPreviewTemplate,
  TextFieldWrapper,
  ResultTable,
} from "@/components/Sections/MysqlCompatible/Content/Create";

const SQL_CONTENT = `DELETE FROM products WHERE product_id = \${product_id};`;

export default function DeleteContent() {
  const [sql, setSql] = React.useState(SQL_CONTENT);
  const [prodId, setProdId] = React.useState<number | null>(null);
  const [result, setResult] = React.useState<SQLResultType | null>(null);
  const [originalResult, setOriginalResult] =
    React.useState<SQLResultType | null>(null);
  const [submitting, setSubmitting] = React.useState(false);
  const [globalLoading, setGlobalLoading] = React.useState(true);

  const { enqueueSnackbar } = useSnackbar();
  const session = useRecoilValue(sessionState);
  const [isInitCRUD] = useInitCRUD((error) => {
    enqueueSnackbar(`Error[init simple CRUD]: ${error?.message}`, {
      variant: "error",
    });
    setGlobalLoading(false);
  }, !!session);

  React.useEffect(() => {
    if (!prodId) {
      setSql(SQL_CONTENT);
      return;
    }
    const newSql = SQL_CONTENT.replace(
      /\${product_id}/g,
      prodId?.toString() || ""
    );
    setSql(newSql);
  }, [prodId]);

  React.useEffect(() => {
    if (!isInitCRUD) return;

    const fetchData = async () => {
      try {
        const originalData = await retrieveProductList();
        setOriginalResult(originalData);
      } catch (error: any) {
        console.error(error);
        enqueueSnackbar(`Error[fetch data]: ${error?.message}`, {
          variant: "error",
        });
      } finally {
        setGlobalLoading(false);
      }
    };

    fetchData();
  }, [isInitCRUD]);

  // React.useEffect(() => {
  //   if (originalResult?.rows && originalResult?.rows?.length > 0) {
  //     setProdId(originalResult.rows[0].productId);
  //   }
  // }, [originalResult]);

  const tableFieldsMemo = React.useMemo(() => {
    // if (result?.fields) {
    //   return result.fields.map((field) => field.name);
    // } else if (originalResult?.fields) {
    //   return originalResult.fields.map((field) => field.name);
    // }
    return ["productId", "productName", "price"];
  }, [result, originalResult]);

  const tableRowsMemo = React.useMemo(() => {
    const resultRowsIdList =
      result?.rows?.map((i) => i[tableFieldsMemo[0] || "productId"]) || [];
    if (originalResult?.rows && result?.rows) {
      const resultRows = originalResult.rows.map((row) => {
        !resultRowsIdList.includes(row[tableFieldsMemo[0] || "productId"]) &&
          (row._delete = true);
        return row;
      });
      return resultRows;
    } else if (originalResult?.rows) {
      return originalResult.rows;
    }
    return [];
  }, [result, originalResult]);

  const handleSubmmit = async () => {
    if (!prodId) {
      return;
    }
    setSubmitting(true);
    setResult(null);
    try {
      await deleteProduct(prodId);
      const result = await retrieveProductList();
      setResult(result);
    } catch (error: any) {
      console.error(error);
      enqueueSnackbar(`Error[run SQL]: ${error?.message}`, {
        variant: "error",
      });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <>
      <ActionTemplate
        inputTitle="Choose a product to delete:"
        sqlContent={sql}
        handleSubmmit={handleSubmmit}
        disableSubbmit={globalLoading || !prodId}
        submitting={globalLoading || submitting}
        submitBtnLabel={
          globalLoading ? "Init sample data" : "Run SQL and Delete"
        }
        result={result?.rows?.length ? `OK, affects 1 row (s).` : null}
      >
        <TextFieldWrapper title="Product name">
          <Select
            size="small"
            id="product_id"
            value={prodId || ""}
            disabled={globalLoading}
            onChange={(event) => {
              const value = event.target.value;
              setProdId(value as number);
            }}
            sx={{
              minWidth: "320px",
            }}
          >
            {((result || originalResult)?.rows || []).map((item) => (
              <MenuItem key={item.productId} value={item.productId}>
                {item.productName}({item.productId})
              </MenuItem>
            ))}
          </Select>
        </TextFieldWrapper>
      </ActionTemplate>

      <ResultPreviewTemplate>
        <ResultTable fields={tableFieldsMemo} rows={tableRowsMemo} />
      </ResultPreviewTemplate>
    </>
  );
}