import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import NextLink from "next/link";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { useRouter as useNextRouter } from "next/router";
import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
import KeyboardReturnOutlinedIcon from "@mui/icons-material/KeyboardReturnOutlined";

import type { NavItemType } from "@/components/Layout2/_config";
import type { CardItemType } from "@/components/Sections/RealTimeAnalytics/_config";
import SQL from "@/components/Sections/RealTimeAnalytics/SQL";

export default function ContentTemplate(props: {
  example: string;
  topic: string;
  cards: (CardItemType | { id: string; title: string; type?: string })[];
  navItems: NavItemType[];
  children: React.ReactNode;
}) {
  const { example, topic, cards, navItems, children } = props;

  const router = useNextRouter();

  const targetNavCfg = navItems.find((nav) => nav.id === topic);

  return (
    <>
      <Grid xs={12}>
        <Breadcrumbs aria-label="breadcrumb">
          <Box
            color="inherit"
            display="flex"
            component={NextLink}
            href={targetNavCfg?.url || "/"}
            alignItems="center"
            gap={0.5}
          >
            {/* {targetNavCfg?.Icon || <HomeOutlinedIcon fontSize="inherit" />} */}
            <KeyboardReturnOutlinedIcon fontSize="inherit" />
            <Typography variant="body1" color="inherit">
              Examples
            </Typography>
          </Box>
          <Select
            defaultValue={example}
            size="small"
            variant="standard"
            margin="dense"
            IconComponent={UnfoldMoreIcon}
            onChange={(event: SelectChangeEvent) => {
              router.push(`/${topic}/${event.target.value}`);
            }}
            sx={{
              "& .MuiSelect-select": {
                py: 0,
              },
              "&:before": {
                display: "none",
              },
              "&:after": {
                display: "none",
              },
            }}
          >
            {cards.map((option) => {
              if ((option as any)?.type === "subTitle") {
                return (
                  <MenuItem
                    key={option.id}
                    value={option.id}
                    disabled
                    sx={{
                      fontWeight: 600,
                      color: "rgba(0, 0, 0, 0.54)",
                    }}
                  >
                    {option.title}
                  </MenuItem>
                );
              }
              return (
                <MenuItem
                  key={option.id}
                  value={option.id}
                  // onClick={handleExampleItemClick(option.id)}
                >
                  {option.title}
                </MenuItem>
              );
            })}
          </Select>
        </Breadcrumbs>
      </Grid>
      <Grid xs={12} container spacing={2}>
        {children}
      </Grid>
    </>
  );
}