import { Grid, Typography, Stack, } from '@mui/material';
import { useState, useEffect, lazy } from "react";

import Loadable from 'components/Loadable';
import { useIntl, FormattedMessage } from "react-intl";

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
const AboutUs_en = Loadable(lazy(() => import('pages/extra-pages/AboutUs/AboutUs_en')));
const AboutUs_zh = Loadable(lazy(() => import('pages/extra-pages/AboutUs/AboutUs_zh')));
const AboutUs_cn = Loadable(lazy(() => import('pages/extra-pages/AboutUs/AboutUs_cn')));

const PrivacyPolicy = () => {
    const intl = useIntl();
    const { locale } = intl;
    const [onReady, setOnReady] = useState(false);
    const [content, setContent] = useState("");

    useEffect(() => {
        setOnReady(true);
        if (locale === 'zh-CN') {
            setContent(<><AboutUs_cn /></>);
        } else if (locale === 'zh-HK') {
            setContent(<><AboutUs_zh /></>);
        } else {
            setContent(<><AboutUs_en /></>);
        }
    }, [locale]);


    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            (
                <Grid container justifyContent="center" alignItems="center" >
                    <Grid item xs={12}>
                        <div style={BackgroundHead}>
                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
                                    <FormattedMessage id="aboutUs" />
                                </Typography>
                            </Stack>
                        </div>
                    </Grid>
                    <Grid item xs={10} md={8} lg={6}>
                        {content}
                    </Grid>
                </Grid>
            )
    );

}

export default PrivacyPolicy;