import React, { ReactNode, useEffect } from 'react';

import { Flex, Image } from '@chakra-ui/react';
import { useLocation } from 'react-router-dom';

import ikon from '@/assets/images/ikon.svg';
import { TOP_BAR_HEIGHT } from '@/components/TopBar/TopBar';

export type LayoutProps = React.PropsWithChildren<unknown> & {
  topBar?: ReactNode;
};

export const PageLayout = ({ children }: LayoutProps) => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return (
    <>
      <Flex
        minH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
        maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
        position="absolute"
        top={TOP_BAR_HEIGHT}
        bottom={0}
        left={0}
        right={0}
        minWidth="300px"
        zIndex={0}
      >
        <Image src={ikon} boxSize="90vh" margin="auto" />
      </Flex>
      <Flex
        direction="column"
        overflowX="auto"
        overflowY="auto"
        minH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
        maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
        position="absolute"
        top={TOP_BAR_HEIGHT}
        bottom={0}
        left={0}
        right={0}
        minWidth="300px"
      >
        {children}
      </Flex>
    </>
  );
};