import { useEffect, useState } from 'react';
import Helmet from 'react-helmet';
import { Container, Box, type SxProps, Drawer, type DrawerProps } from '@mui/material';
import { useSize } from 'ahooks';

import Sidebar, { type LinkItem } from './sidebar';
import Header from './header';
import Footer from '../../Footer';
import { styled } from '../../Theme';

const Wrapper = styled('div')`
  &.dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .dashboard__body {
    overflow: hidden;
    flex: 1;
  }
  .dashboard__main {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex: 1;
  }
  .dashboard__content {
    flex: 1;
  }

  .drawerPaper {
    position: relative;
    white-space: nowrap;
    width: 120px;
    background: ${(props) => props.theme.palette.background.default};
    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.palette.mode === 'light' ? 0.05 : 0.5)});
    border: 0;
  }
`;

export interface DashboardProps extends React.HTMLAttributes<HTMLDivElement> {
  links?: LinkItem[];
  brand?: string;
  description?: React.ReactNode;
  images: Record<string, string>;
  title?: string;
  brandAddon?: React.ReactNode;
  headerAddon?: React.ReactNode;
  prefix?: string;
  fullWidth?: false | true;
  contentLayout?: 'row' | 'column';
  homeUrl?: string;
  logo?: React.ReactNode;
  sx?: SxProps;
}

export default function Dashboard({
  links = [],
  brand = '',
  description = '',
  images,
  title = 'Home',
  brandAddon = undefined,
  headerAddon = undefined,
  prefix = '/images',
  fullWidth = false,
  contentLayout = 'column',
  className = '',
  homeUrl = '/',
  logo = undefined,
  children,
  ...rest
}: DashboardProps) {
  const breakpoint = 960;
  const size = useSize(document.body);
  const width = size?.width || 0;
  const [drawerMode, setDrawerMode] = useState<DrawerProps['variant']>(width >= breakpoint ? 'permanent' : 'temporary');
  const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');

  useEffect(() => {
    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
    setDrawerMode(newMode);
    setDrawerOpen(newMode !== 'temporary');
  }, [width]);

  const onToggleDrawer = () => {
    setDrawerOpen(!drawerOpen);
  };
  const isFullWidth = fullWidth || contentLayout === 'row';

  return (
    <Wrapper className={`dashboard ${className}`} {...rest}>
      <Helmet title={`${title}-${brand}`} />
      <Header
        className="dashboard__header"
        onToggleMenu={onToggleDrawer}
        brand={brand}
        brandAddon={brandAddon}
        description={description}
        addons={headerAddon}
        homeUrl={homeUrl}
        logo={logo}
      />
      <Box
        className="dashboard__body"
        sx={{
          display: 'flex',
        }}>
        <Drawer
          variant={drawerMode}
          className="drawer"
          classes={{ paper: 'drawerPaper' }}
          open={drawerOpen}
          onClose={onToggleDrawer}
          ModalProps={{ disablePortal: true, keepMounted: true }}>
          <Sidebar className="dashboard__sidebar" images={images} links={links} prefix={prefix} logo={logo} />
        </Drawer>
        <Box className="dashboard__main">
          <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">
            {children}
          </Container>
          <Footer />
        </Box>
      </Box>
    </Wrapper>
  );
}
