import { useState, useEffect, useContext, useRef } from 'react'
import GlobalContext from '../../utils/GlobalContext';
import './index.less';
import Header from './Header';
import Content from './Content';
import { useSize } from 'ahooks'
export default function Main(props) {
    const { siteTitle } = useContext(GlobalContext);
    // const rootRef = useRef();
    useEffect(() => {
        if (siteTitle) {
            document.title = siteTitle;
        }
    }, [siteTitle])

    const [style, setStyle] = useState();
    const rootRef = useRef();
    const size = useSize(rootRef)

    useEffect(() => {
        // let screenSize = defaultSize;
        // if (!screenSize) {
        let screenSize = [1920, 1080]
        // }
        // screenSize[1] = (document.body.offsetHeight / document.body.offsetWidth) * screenSize[0];
        screenSize[0] = (document.body.offsetWidth / document.body.offsetHeight) * screenSize[1];
        // console.log(rootRef?.current?.offsetWidth / rootRef?.current?.offsetHeight)
        if (size) {
            const { width, height } = size;
            const resw = screenSize[0] / width;
            const resh = screenSize[1] / height;
            let res = Math.max(resw, resh);

            let scale = 1 / res;

            const realWidth = screenSize[0] * scale;
            const realHeight = screenSize[1] * scale;

            let left = (width - realWidth) / 2;
            let top = (height - realHeight) / 2;
            setStyle({
                transform: `scale(${scale})`,
                left: left,
                top: top,
                scale,
                width: screenSize[0],
                height: screenSize[1],
                transformOrigin: '0 0'
            })
        }
    }, [size]);

    return <div className='main' ref={rootRef}>
        {style && <div className='layout-v' style={style}>
            <div className='header layout-h'>
                <Header rootRef={rootRef} />
            </div>
            <div className='fill h0'>
                <Content />
            </div>
        </div>}
    </div>;
}