import * as React from "react";
import { styled } from "@mui/material/styles";
import Box, { BoxProps } from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button, { ButtonProps } from "@mui/material/Button";
import Typography, { TypographyProps } from "@mui/material/Typography";
import Switch, { SwitchProps } from "@mui/material/Switch";
import Fade from "@mui/material/Fade";
import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2

const CustomSwitch = styled((props: SwitchProps) => (
  <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(({ theme }) => ({
  width: 400,
  height: 72,
  padding: 6,
  "& .MuiSwitch-switchBase": {
    padding: 0,
    margin: 12,
    transitionDuration: "300ms",
    borderRadius: "inherit",
    "&.Mui-checked": {
      transform: "translateX(188px)",
      color: "#fff",
      "& + .MuiSwitch-track": {
        backgroundColor: "#F4F6F7",
        opacity: 1,
        // border: 0,
      },
      "&.Mui-disabled + .MuiSwitch-track": {
        opacity: 0.5,
      },
    },
    "&.Mui-focusVisible .MuiSwitch-thumb": {
      // color: "#33cf4d",
      border: "6px solid #EAEAEA",
    },
    "&.Mui-disabled .MuiSwitch-thumb": {
      color:
        theme.palette.mode === "light"
          ? theme.palette.grey[100]
          : theme.palette.grey[600],
    },
    "&.Mui-disabled + .MuiSwitch-track": {
      opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
    },
  },
  "& .MuiSwitch-thumb": {
    boxSizing: "border-box",
    width: 188,
    height: 48,
    boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.1)",
    borderRadius: "6px",
  },
  "& .MuiSwitch-track": {
    borderRadius: "6px",
    backgroundColor: "#F4F6F7",
    border: "1px solid #EAEAEA",
    opacity: 1,
    transition: theme.transitions.create(["background-color"], {
      duration: 500,
    }),

    // '&:before, &:after': {
    //   // content: '""',
    //   position: 'absolute',
    //   top: '50%',
    //   transform: 'translateY(-50%)',
    //   width: 16,
    //   height: 16,
    // },
    // '&:before': {
    //   content: '"< 10MRows of Data"',
    //   left: 12,
    // },
    // '&:after': {
    //   backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
    //     theme.palette.getContrastText(theme.palette.primary.main),
    //   )}" d="M19,13H5V11H19V13Z" /></svg>')`,
    //   right: 12,
    // },
  },
}));

export default function OutlinedCard(props: {
  checked?: boolean;
  handleChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
}) {
  const { checked, handleChange } = props;

  const [hasAutoChanged, setHasAutoChanged] = React.useState(false);

  React.useEffect(() => {
    if (!hasAutoChanged) {
      const timer = setTimeout(() => {
        handleChange && handleChange();
        setHasAutoChanged(true);
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [handleChange, hasAutoChanged]);

  return (
    <Box sx={{ minWidth: 275 }}>
      <Card variant="outlined">
        <CardContent>
          <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
            Switch data size to check out the trend of average response time
            changes on the right
          </Typography>

          <Box position="relative" width="fit-content" margin="0 auto">
            <CustomSwitch
              checked={checked}
              onChange={handleChange}
              inputProps={{ "aria-label": "controlled" }}
              icon={
                <Button disableRipple sx={CommonSxButton}>
                  <Typography
                    sx={{
                      ...CommonSxTypography1,
                      color: (theme) => theme.palette.primary.main,
                    }}
                  >{`< 10M`}</Typography>
                  <Typography
                    sx={CommonSxTypography2}
                  >{`Rows of data`}</Typography>
                </Button>
              }
              checkedIcon={
                <Button disableRipple sx={CommonSxButton}>
                  <Typography
                    sx={{
                      ...CommonSxTypography1,
                      color: (theme) => theme.palette.primary.main,
                    }}
                  >{`> 100M`}</Typography>
                  <Typography
                    sx={CommonSxTypography2}
                  >{`Rows of data`}</Typography>
                </Button>
              }
            />
            <Fade in={!checked}>
              <Box
                sx={{
                  ...CommonSxFadeBox,
                  right: "60px",
                  cursor: "pointer",
                }}
                onClick={() => handleChange && handleChange()}
              >
                <Typography sx={CommonSxTypography1}>{`> 100M`}</Typography>
                <Typography
                  sx={CommonSxTypography2}
                >{`Rows of data`}</Typography>
              </Box>
            </Fade>
            <Fade in={!!checked}>
              <Box
                sx={{
                  ...CommonSxFadeBox,
                  left: "60px",
                  cursor: "pointer",
                }}
                onClick={() => handleChange && handleChange()}
              >
                <Typography sx={CommonSxTypography1}>{`< 10M`}</Typography>
                <Typography
                  sx={CommonSxTypography2}
                >{`Rows of data`}</Typography>
              </Box>
            </Fade>
          </Box>

          <Grid container>
            <Grid
              xs={5}
              display="flex"
              flexDirection="column"
              alignItems="center"
              justifyContent="center"
            >
              <Typography sx={CommonSxTypography1}>MySQL RDS</Typography>
              <Typography sx={CommonSxTypography2}>
                Average Query Duration
              </Typography>
            </Grid>
            <Grid
              xs={2}
              display="flex"
              flexDirection="column"
              alignItems="center"
              justifyContent="center"
            >
              <Box
                sx={{
                  background: "#F2F5FA",
                  border: "1px solid #EAEAEA",
                  borderRadius: "6px",
                  p: 2,
                  width: "fit-content",
                }}
              >
                <Typography
                  sx={{
                    fontWeight: 800,
                    fontSize: "24px",
                    lineHeight: "29px",
                    color: (theme) => theme.palette.text.secondary,
                  }}
                >
                  VS
                </Typography>
              </Box>
            </Grid>
            <Grid
              xs={5}
              display="flex"
              flexDirection="column"
              alignItems="center"
              justifyContent="center"
            >
              <Typography sx={CommonSxTypography1}>TiDB Cloud Starter</Typography>
              <Typography sx={CommonSxTypography2}>
                Average Query Duration
              </Typography>
            </Grid>
          </Grid>

          <Grid container>
            <Grid xs={5}>
              <Typography
                sx={{
                  fontWeight: 600,
                  fontSize: "24px",
                  lineHeight: "29px",
                  color: "#397FF6",
                  textAlign: "center",
                  ...(checked && { color: "#EA3526" }),
                }}
              >
                {!checked ? `In milliseconds` : `In seconds`}
              </Typography>
            </Grid>
            <Grid xs={2} display="flex" justifyContent="center">
              <Box
                sx={{
                  width: "2px",
                  height: "100%",
                  background: (theme) => theme.palette.line?.primary,
                }}
              />
            </Grid>
            <Grid xs={5}>
              <Typography
                sx={{
                  fontWeight: 600,
                  fontSize: "24px",
                  lineHeight: "29px",
                  color: "#397FF6",
                  textAlign: "center",
                }}
              >
                In milliseconds
              </Typography>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    </Box>
  );
}

const CommonSxTypography1: TypographyProps["sx"] = {
  fontWeight: 600,
  fontSize: "20px",
  lineHeight: "24px",
  color: (theme) => theme.palette.text.primary,
};

const CommonSxTypography2: TypographyProps["sx"] = {
  fontSize: "12px",
  lineHeight: "15px",
  color: (theme) => theme.palette.text.secondary,
};

const CommonSxFadeBox: BoxProps["sx"] = {
  position: "absolute",
  top: "50%",
  transform: "translateY(-50%)",
  cursor: "default",
};

const CommonSxButton: ButtonProps["sx"] = {
  flexDirection: "column",
  width: "188px",
  height: "48px",
  backgroundColor: (theme) => theme.palette.background.paper,
  boxShadow: "1px 1px 2px rgba(0, 0, 0, 0.1)",
  borderRadius: "6px",
};