import React, { useEffect, useRef, useMemo, useState } from 'react';
import { Layout, Spin } from 'antd';
import { Outlet } from "react-router-dom";
import PageTransition from './PageTransition';
import Footer from './Footer';

const { Content } = Layout;

export default (props) => {  
  const containerRef = useRef();
  const [minHeight, setMinHeight] = useState(0);
  const contentStyle = useMemo(() => ({ minHeight: `${minHeight}px` }), [minHeight]);
  
  useEffect(() => {
    const containerHeight = containerRef.current.offsetHeight;
    const footerHeight = document.querySelector('.ant-layout-footer').offsetHeight;
    setMinHeight(containerHeight - footerHeight);
  }, []);

  return (
    <div className='layout-container' ref={containerRef}>
      <Content style={contentStyle}>
        {/* <PageTransition location={props.location}> */}
          <Outlet />
        {/* </PageTransition> */}
      </Content>
      <Footer />
    </div>
  )
}
