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: 'auto',
    height: 'auto',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));

import DownloadIcon from '@mui/icons-material/Download';

const UserMenuPub = () => {
    const intl = useIntl();
    const { locale } = intl;
    const [onReady, setOnReady] = useState(false);

    useEffect(() => {
        setOnReady(true);
    }, [locale]);

    const tableStyle = {
        fontFamily: "arial, sans-serif",
        borderCollapse: "collapse",
        width: "100%",
    }

    const cellStyle = {
        border: "1px solid #dddddd",
        textAlign: "left",
        padding: "8px"
    };

    const getRow = ({ titleId, orgEn, orgZh, orgCn, indEn, indZh, indCn }) => {
        const guideTitle = intl.formatMessage({ id: titleId });
        const orgUserType = intl.formatMessage({ id: "forOrgUser" });
        const indUserType = intl.formatMessage({ id: "forIndUser" });

        const orgHref = locale === "zh-HK" ? orgZh : locale === "en" ? orgEn : orgCn;
        const indHref = locale === "zh-HK" ? indZh : locale === "en" ? indEn : indCn;

        return (
            <tr>
                <td style={cellStyle}>{guideTitle}</td>

                <td style={cellStyle}>
                    <a
                    href={orgHref}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={intl.formatMessage(
                        { id: "downloadPdfAria" },
                        { guide: guideTitle, userType: orgUserType }
                    )}
                    >
                    <DownloadIcon aria-hidden="true" focusable="false" />
                    </a>
                </td>

                <td style={cellStyle}>
                    <a
                    href={indHref}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={intl.formatMessage(
                        { id: "downloadPdfAria" },
                        { guide: guideTitle, userType: indUserType }
                    )}
                    >
                    <DownloadIcon aria-hidden="true" focusable="false" />
                    </a>
                </td>
            </tr>
        );
    };


    const pnspsurl = "https://"+window.location.hostname;


    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            (
                <Grid container sx={{ minHeight: '87vh', mb: 3}} direction="column" alignItems="center" >
                    <Grid item xs={12} md={12} width="100%">
                        <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'} }}>
                                    <FormattedMessage id="userGuide" />
                                </Typography>
                            </Stack>
                        </div>
                    </Grid>
                    <Grid container justifyContent="center" alignItems="center" >
                        <Grid item xs={10} md={8} lg={6}>
                            <div style={{
                                textAlign: "justify",
                                textJustify: "interWord",
                                fontStyle: "normal"
                            }}>

                                <p>
                                    
                                    <table style={tableStyle}>
                                        <tr>
                                            <th style={cellStyle} width="70%"></th>
                                            <th style={cellStyle} width="15%"> <FormattedMessage id="forOrgUser" /></th>
                                            <th style={cellStyle} width="15%"> <FormattedMessage id="forIndUser" /></th>
                                        </tr>

                                        {getRow({
                                            title: <FormattedMessage id="userGuide1" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/01 - Create account - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/01c - Create account - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/01sc - Create account - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/01 - Create account - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/01c - Create account - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/01sc - Create account - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide2" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/02 - Login - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/02c - Login - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/02sc - Login - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/02 - Login - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/02c - Login - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/02sc - Login - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide3" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/03 - Application for publishing a Public Notice in the Gazette - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/03c - Application for publishing a Public Notice in the Gazette - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/03sc - Application for publishing a Public Notice in the Gazette - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/03 - Application for publishing a Public Notice in the Gazette - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/03c - Application for publishing a Public Notice in the Gazette - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/03sc - Application for publishing a Public Notice in the Gazette - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide4" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/04 - Proofreading reply (with correction) - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/04c - Proofreading reply (with correction) - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/04sc - Proofreading reply (with correction) - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/04 - Proofreading reply (with correction) - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/04c - Proofreading reply (with correction) - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/04sc - Proofreading reply (with correction) - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide5" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/05 - Proofreading reply (pass for printing) - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/05c - Proofreading reply (pass for printing) - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/05sc - Proofreading reply (pass for printing) - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/05 - Proofreading reply (pass for printing) - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/05c - Proofreading reply (pass for printing) - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/05sc - Proofreading reply (pass for printing) - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide6" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide7" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/07 - Forgot password - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/07c - Forgot password - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/07sc - Forgot password - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/07 - Forgot password - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/07c - Forgot password - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/07sc - Forgot password - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide8" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/08 - Change password - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/08c - Change password - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/08sc - Change password - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/08 - Change password - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/08c - Change password - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/08sc - Change password - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuide9" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/09 - Language of email notification - c 1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/09c - Language of email notification - c 1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/09sc - Language of email notification - c 1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/09 - Language of email notification - p 1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/09c - Language of email notification - p 1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/09sc - Language of email notification - p 1.pdf"
                                        })}

                                        {getRow({
                                            title: <FormattedMessage id="userGuidePub10" />,
                                            orgEn: pnspsurl + "/user-guide-pub/eng/10-Payment-c1.pdf",
                                            orgZh: pnspsurl + "/user-guide-pub/cht/10c-Payment-c1.pdf",
                                            orgCn: pnspsurl + "/user-guide-pub/chs/10sc-Payment-c1.pdf",
                                            indEn: pnspsurl + "/user-guide-pub/eng/10-Payment-p1.pdf",
                                            indZh: pnspsurl + "/user-guide-pub/cht/10c-Payment-p1.pdf",
                                            indCn: pnspsurl + "/user-guide-pub/chs/10sc-Payment-p1.pdf"
                                        })}

                                        
                                    </table>
                                    <FormattedMessage id="userGuidePubNote" />
                                </p>
                            </div>
                        </Grid>
                    </Grid>
                </Grid>
            )
    );

}

export default UserMenuPub;