import * as React from "react";
import {
  Card,
  CardHeader,
  CardContent,
  SxProps,
  Theme,
  Tabs,
  Tab,
  Box,
  Typography,
  Grid,
  Link,
} from "@mui/material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { darken, lighten, styled } from "@mui/material/styles";
import { ThemeProvider } from "@emotion/react";
import { TAB_THEME } from "@/theme/colorConst";
import AllProjectGrid from "../UserWorkspacePage/ProjectGrid";

interface AssignedProjectGridProps {
  Title?: string;
  // rows: any[];
  // columns: any[];
  columnWidth?: number;
  Style?: boolean;
  sx?: SxProps<Theme>;
  height?: number;
  [key: string]: any;
}

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function CustomTabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

const AssignedProjectGrid: React.FC<AssignedProjectGridProps> = ({
  Title,
  rows,
  columns,
  columnWidth,
  Style = true,
  sx,
  height,
  ...props
}) => {
  // const modifiedColumns = columns.map((column) => {
  //   return {
  //     ...column,
  //     width: columnWidth ?? 150,
  //   };
  // });

  // const rowsWithDefaultValues = rows.map((row) => {
  //   return { ...row };
  // });

  const getBackgroundColor = (color: string, mode: "light" | "dark") =>
    mode === "dark" ? darken(color, 0.7) : lighten(color, 0.7);

  const getHoverBackgroundColor = (color: string, mode: "light" | "dark") =>
    mode === "dark" ? darken(color, 0.6) : lighten(color, 0.6);

  const getSelectedBackgroundColor = (color: string, mode: "light" | "dark") =>
    mode === "dark" ? darken(color, 0.5) : lighten(color, 0.5);

  const getSelectedHoverBackgroundColor = (
    color: string,
    mode: "light" | "dark",
  ) => (mode === "dark" ? darken(color, 0.4) : lighten(color, 0.4));

  const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
    "& .super-app-theme--Open": {
      backgroundColor: getBackgroundColor(
        theme.palette.info.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.info.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.info.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.info.main,
            theme.palette.mode,
          ),
        },
      },
    },
    "& .super-app-theme--finish": {
      backgroundColor: getBackgroundColor(
        theme.palette.success.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.success.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.success.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.success.main,
            theme.palette.mode,
          ),
        },
      },
    },
    "& .super-app-theme--danger": {
      backgroundColor: getBackgroundColor(
        theme.palette.warning.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.warning.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.warning.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.warning.main,
            theme.palette.mode,
          ),
        },
      },
    },
    "& .super-app-theme--warning": {
      backgroundColor: getBackgroundColor(
        theme.palette.error.main,
        theme.palette.mode,
      ),
      "&:hover": {
        backgroundColor: getHoverBackgroundColor(
          theme.palette.error.main,
          theme.palette.mode,
        ),
      },
      "&.Mui-selected": {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.error.main,
          theme.palette.mode,
        ),
        "&:hover": {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.error.main,
            theme.palette.mode,
          ),
        },
      },
    },
  }));

  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <div style={{ height: height ?? 400, width: "100%" }}>
      <Card style={{ margin: "auto 20px auto 20px" }}>
        {Title && <CardHeader title={Title} />}
        <CardContent
          style={{
            padding: "0px 24px 24px 24px",
            display: "flex",
            alignItems: "center",
          }}
        >
          <div>
            <ThemeProvider theme={TAB_THEME}>
              <Box sx={{ borderBottom: 4, borderColor: "divider" }}>
                <Tabs
                  value={value}
                  onChange={handleChange}
                  aria-label="Manage assigned project"
                >
                  <Tab label="All Projects" {...a11yProps(0)} />
                  <Tab label="On Track" {...a11yProps(1)} />
                  <Tab label="Potential Delay" {...a11yProps(2)} />
                </Tabs>
              </Box>
              {/* <CustomTabPanel value={value} index={0}>
      Item {value}
    </CustomTabPanel>
    <CustomTabPanel value={value} index={1}>
      Item {value}
    </CustomTabPanel>
    <CustomTabPanel value={value} index={2}>
      Item {value}
    </CustomTabPanel> */}
            </ThemeProvider>
          </div>
        </CardContent>
        <AllProjectGrid tab={value} />
      </Card>
    </div>
  );
};

export default AssignedProjectGrid;