import * as React from "react";
import { styled } from "@mui/material/styles";
import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import Button from "@mui/material/Button";
import Badge from "@mui/material/Badge";
import Box from "@mui/material/Box";
import MenuIcon from "@mui/icons-material/Menu";
import NotificationsIcon from "@mui/icons-material/Notifications";
import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";

import { DRAWER_WIDTH } from "@/constants";
import { URL_TIDB_CLOUD_SIGNUP } from "@/constants/url";
import { TiDBCloudIcon, VerticalDivider } from "@/components/Icons";

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme, open }) => ({
  backgroundColor: theme.palette.background.paper,
  borderBottom: `4px solid ${theme.palette.primary.light}`,
  boxShadow: "none",
  // zIndex: theme.zIndex.drawer + 1,
  [theme.breakpoints.up("md")]: {
    zIndex: theme.zIndex.drawer + 1,
  },
  transition: theme.transitions.create(["width", "margin"], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  // ...(open && {
  //   marginLeft: DRAWER_WIDTH,
  //   width: `calc(100% - ${DRAWER_WIDTH}px)`,
  //   transition: theme.transitions.create(["width", "margin"], {
  //     easing: theme.transitions.easing.sharp,
  //     duration: theme.transitions.duration.enteringScreen,
  //   }),
  // }),
}));

export interface HeaderProps {
  open: boolean;
  toggleDrawer: () => void;
}

export default function Header(props: HeaderProps) {
  const { open, toggleDrawer } = props;

  return (
    <AppBar position="absolute" open={open}>
      <Toolbar
        sx={{
          pr: "24px", // keep right padding when drawer closed
        }}
      >
        <IconButton
          edge="start"
          // color="inherit"
          aria-label="open drawer"
          onClick={toggleDrawer}
          sx={{
            marginRight: (theme) => theme.spacing(2),
            // ...(open && { display: "none" }),
            display: { md: "none" },
          }}
        >
          <MenuIcon />
        </IconButton>
        <Box
          sx={{
            flexGrow: 1,
            display: "inline-flex",
            alignItems: "center",
            // gap: (theme) => theme.spacing(1),
          }}
        >
          {/* <TiDBCloudIcon cursor="default" fontSize="large" /> */}
          <Typography
            component="div"
            variant="h6"
            color="#333333"
            fontWeight={600}
            fontSize={"24px"}
            noWrap
            sx={{
              pl: (theme) => theme.spacing(1),
              cursor: "default",
              display: { xs: "none", md: "block" },
            }}
          >
            {`TiDB`}
          </Typography>
          <VerticalDivider
            sx={{
              display: { xs: "none", md: "block" },
            }}
          />
          <Typography
            component="span"
            variant="h6"
            color="#565656"
            fontWeight="inherit"
            fontSize={"24px"}
            fontStyle="italic"
            noWrap
            width="fit-content"
            pr={1}
            sx={{
              cursor: "default",
              display: { xs: "none", md: "block" },
            }}
          >
            Playground
          </Typography>
        </Box>
        <IconButton
          color="primary"
          href={URL_TIDB_CLOUD_SIGNUP}
          sx={{
            display: { xs: "inline-flex", md: "none" },
          }}
        >
          <AccountCircleOutlinedIcon />
        </IconButton>
        <Button
          variant="outlined"
          startIcon={<AccountCircleOutlinedIcon />}
          href={URL_TIDB_CLOUD_SIGNUP}
          sx={{
            display: { xs: "none", md: "inline-flex" },
          }}
        >
          Start for Free
        </Button>
      </Toolbar>
    </AppBar>
  );
}