import { DrawerHeaderStyled } from './DrawerHeaderStyled';
import { useLayoutDrawerState, useLayoutLogoState, useLayoutMediaState } from '@/components/Layout/Provider';
import { Logo } from '@/components/Logo';
import { useSx } from '@/hooks';
import { SxProps, useTheme } from '@mui/material';

type IDrawerHeaderType = React.PropsWithChildren<{
  sx?: SxProps;
}>;

function DrawerHeader(props: IDrawerHeaderType): JSX.Element {
  const theme = useTheme();
  const { horizontal } = useLayoutMediaState();
  const { open } = useLayoutDrawerState();
  const { icon, main } = useLayoutLogoState();
  const sx = useSx(props, {
    minHeight: horizontal ? 'unset' : '60px',
    width: horizontal ? { xs: '100%', lg: '424px' } : 'inherit',
    paddingTop: horizontal ? { xs: '10px', lg: '0' } : '8px',
    paddingBottom: horizontal ? { xs: '18px', lg: '0' } : '8px',
    paddingLeft: horizontal ? { xs: '24px', lg: '0' } : open ? '24px' : 0
  });
  return (
    //@ts-ignore
    <DrawerHeaderStyled theme={theme} open={open} sx={sx}>
      <Logo to="/" isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} logoMain={main} logoIcon={icon} />
    </DrawerHeaderStyled>
  );
}

export { DrawerHeader };
export type { IDrawerHeaderType };