import * as React from 'react';
import NextLink from 'next/link';
import { styled } from '@mui/material/styles';
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
import Container from '@mui/material/Container';
import { useRouter } from "next/router";

import { URL_LAB, URL_TIDB_CLOUD_SIGNUP } from '@/constants/url';
import { TiDBLogoRed } from '@/components/Icons';
import { gtmCloudSignUpBtnClick } from '@/lib/gtag';

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',
  // boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.03)",
  // 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;

  const { asPath } = useRouter();

  return (
    <AppBar position='absolute' open={open}>
      <Container>
        <Toolbar
          sx={{
            justifyContent: 'space-between',
            pl: {
              xs: 0,
            },
            pr: {
              xs: 0,
            },
          }}
        >
          <Box
            sx={{
              display: 'inline-flex',
              alignItems: 'center',
            }}
          >
            <NextLink href={`https://www.pingcap.com/`} style={{ display: 'block', height: 32 }}>
              <img src="/img/tidbcloud-logo.png" alt='TiDB Cloud Logo' height={32} />
            </NextLink>
          </Box>
          <IconButton
            color='primary'
            href={URL_TIDB_CLOUD_SIGNUP}
            target='_blank'
            sx={{
              display: { xs: 'inline-flex', md: 'none' },
            }}
            onClick={() => {
              gtmCloudSignUpBtnClick({
                label: 'Sign_up_for_free',
                url: asPath,
              });
            }}
          >
            <AccountCircleOutlinedIcon />
          </IconButton>
          <Button
            variant='contained'
            startIcon={<TiDBLogoRed />}
            href={URL_LAB}
            target='_blank'
            sx={{
              display: { xs: 'none', md: 'inline-flex' },
              background: (theme) => theme.palette.custom.button?.secondary,
            }}
          >
            Back to labs
          </Button>
        </Toolbar>
      </Container>
    </AppBar>
  );
}