// material-ui
import {
    Grid,
    Typography,
    Button,
    RadioGroup,
    Checkbox,
    Dialog, DialogTitle, DialogContent, DialogActions,
    Stack, Box
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as FieldUtils from "utils/FieldUtils";
import * as DateUtils from "utils/DateUtils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import ForwardIcon from '@mui/icons-material/Forward';
import {
    isORGLoggedIn,
    isDummyLoggedIn
} from "utils/Utils";

import { useNavigate } from "react-router-dom";
import { notifyActionSuccess } from 'utils/CommonFunction';
import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { FormattedMessage, useIntl } from "react-intl";
import Loadable from 'components/Loadable';
import { useState, useEffect, lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => {
    const [isWarningPopUp, setIsWarningPopUp] = useState(false);
    const [warningTitle, setWarningTitle] = useState("");
    const [warningText, setWarningText] = useState("");
    const [attachment, setAttachment] = useState({});
    const [selections, setsSelections] = useState(<></>);
    const intl = useIntl();
    const { locale } = intl;
    const dft = locale === 'en' ? "DD MMM YYYY" : "YYYY年MM月DD日";

    const [val, setVal] = useState({});
    const [reloadPage, setReloadPage] = useState(false);
    const [isSubmitting, setSubmitting] = useState(false);
    const [tickAccept, setTickAccept] = useState(false);

    const [issueId, setIssueId] = useState(loadedData.issueId);
    const [closeDate, setCloseDate] = useState(null);
    const [closingDateOff, setClosingDateOff] = useState(null);
    const navigate = useNavigate();

    const BackgroundHead = {
        backgroundImage: `url(${titleBackgroundImg})`,
        width: 'auto',
        height: 'auto',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundColor: '#0C489E',
        backgroundPosition: 'right'
    }

    const tabelStyle = {
        border: "2px solid gray",
        borderCollapse: "collapse",
        padding: "right"
    }

    function getMaxErrStr(num, fieldname) {
        return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });
    }

    useEffect(() => {
        setsSelections(_selections)
    }, [_selections]);

    useEffect(() => {
        for (var i = 0; i < gazetteIssueList?.length; i++) {
            let data = gazetteIssueList[i];
            if (data.id == issueId) {
                setCloseDate(data.closingDate)
                setClosingDateOff(data.closingDateOff)
                break;
            }
        }

    }, [issueId]);

    // function displayErrorMsg(errorMsg) {
    //     return <Typography variant="errorMessage1">{errorMsg}</Typography>
    // }

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: loadedData,
        validationSchema: yup.object().shape({
            contactPerson: yup.string().max(40, intl.formatMessage({ id: 'noMoreThen40Words' })).required(intl.formatMessage({ id: 'requireContactPerson' })).nullable(),
            tel_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })).required(intl.formatMessage({ id: 'requireDialingCode' })),
            fax_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })),
            phoneNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })).required(intl.formatMessage({ id: 'requireContactNumber' })),
            faxNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })),
            remarks: yup.string().max(100, getMaxErrStr(100)).nullable(),
            careOf: yup.string().max(60, getMaxErrStr(60)).nullable(),
            emailAddress: yup.string().email(intl.formatMessage({ id: 'validEmailFormat' })).max(255).test('checkEmailFormat', intl.formatMessage({ id: 'requireEmail' }), function (value) {
                if (isDummyLoggedIn()) {
                    if (value !== undefined) {
                        return true
                    } else {
                        return false
                    }
                } else {
                    return true
                }
            }),
            careOfDum: yup.string().max(60, getMaxErrStr(60)).test('checkCareOfDumFormat', intl.formatMessage({ id: 'requireCareOf' }), function (value) {
                if (isDummyLoggedIn()) {
                    if (value !== undefined) {
                        return true
                    } else {
                        return false
                    }
                } else {
                    return true
                }
            }),
        }),
        onSubmit: values => {
            if (!values.issueId) {
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'requireTargetVol' }));
                setIsWarningPopUp(true);
                return;
            }
            if (!attachment) {
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'requireFile' }));
                setIsWarningPopUp(true);
                return;
            } else if (!attachment.size || attachment.size <= 0) {
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'requireValidFile' }));
                setIsWarningPopUp(true);
                return;
            } else if (attachment.size >= (10 * 1024 * 1034)) {
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'fileSizeWarning' }));
                setIsWarningPopUp(true);
                return;
            }
            if (isORGLoggedIn()) {
                HttpUtils.get({
                    url: UrlUtils.CHECK_OVERDUE,
                    onSuccess: (responData) => {
                        if (responData.haveOverdue) {
                            setVal(values);
                            setWarningTitle(intl.formatMessage({ id: "attention" }))
                            setWarningText(intl.formatMessage({ id: 'dnOverdueWarning' }));
                            setIsWarningPopUp(true);
                        } else {
                            apply(values);
                        }
                    }
                });
            } else {
                apply(values);
            }

        }
    });

    const apply = (values) => {
        setSubmitting(true)
        let careOf = values.careOf ?? "";
        let remarks = values.remarks ?? "";
        if (isDummyLoggedIn()) {
            careOf = values.careOfDum
        }
        if (isDummyLoggedIn()) {
            remarks = values.emailAddress
        }
        HttpUtils.postWithFiles({
            url: UrlUtils.POST_PUBLIC_NOTICE_APPLY,
            params: {
                id: 0,
                contactPerson: values.contactPerson,
                contactTelNo: {
                    countryCode: values.tel_countryCode,
                    phoneNumber: values.phoneNumber
                },
                contactFaxNo: {
                    countryCode: values.fax_countryCode,
                    faxNumber: values.faxNumber
                },
                issueId: issueId,
                careOf: careOf,
                remarks: remarks,
            },
            files: [attachment],
            onSuccess: function (responData) {
                if (responData.msg) {
                    setVal({});
                    setReloadPage(true);
                    setWarningTitle(intl.formatMessage({ id: "attention" }))
                    setWarningText(intl.formatMessage({ id: responData.msg }));
                    setIsWarningPopUp(true);
                    return;
                }
                setSubmitting(false)
                notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!')
                navigate("/publicNotice");
                // location.reload(); 
            }
        });
    }

    const readFile = (event) => {
        let file = event.target.files[0];
        if (file) {
            if (file.name.toLowerCase().substr(file.name.length - 4).includes(".doc")
                || file.name.toLowerCase().substr(file.name.length - 5).includes(".docx")
                || file.name.toLowerCase().substr(file.name.length - 4).includes(".xls")
                || file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")
            ) {
                setAttachment(event.target.files[0]);
            } else {
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'requireValidFileWithFormat' }));
                setIsWarningPopUp(true);
                setAttachment({});
                document.getElementById("uploadFileBtn").value = "";
                return;
            }
        }
    }


    return (
        <Grid container sx={{ minHeight: '87vh', backgroundColor: '#ffffff', 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="applyPublicNotice" />
                        </Typography>
                    </Stack>
                </div>
            </Grid>
            <Grid item xs={12} width={{ xs: "90%", sm: "90%", md: "60%", lg: "60%" }}>
                <Button
                    aria-label={intl.formatMessage({ id: 'back' })}
                    title={intl.formatMessage({ id: 'back' })}
                    sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
                >
                    <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                </Button>
            </Grid>
            {/* <Grid item xs={12}>
                    <Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
                </Grid> */}
            {
                isSubmitting ?
                    <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
                        <LoadingComponent />
                    </Grid>
                    :
                    <Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
                        <Box xs={12} mt={1} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}>
                            <form onSubmit={formik.handleSubmit}>
                                <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">
                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                        {FieldUtils.getTextField({
                                            label: intl.formatMessage({ id: 'contactPerson' }) + ":",
                                            valueName: "contactPerson",
                                            form: formik,
                                            disabled: !isDummyLoggedIn(),
                                            autoFocus: isDummyLoggedIn()
                                        })}
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        {FieldUtils.getPhoneField({
                                            label: intl.formatMessage({ id: 'userContactNumber' }) + ":",
                                            disabled: !isDummyLoggedIn(),
                                            valueName: {
                                                code: "tel_countryCode",
                                                num: "phoneNumber",
                                            },
                                            form: formik
                                        })}
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        {FieldUtils.getPhoneField({
                                            label: intl.formatMessage({ id: 'contactFaxNumber' }) + ":",
                                            disabled: !isDummyLoggedIn(),
                                            valueName: {
                                                code: "fax_countryCode",
                                                num: "faxNumber",
                                            },
                                            form: formik
                                        })}
                                    </Grid>
                                    <Grid item xs={12} lg={12}>
                                        <Grid container alignItems={"center"}>
                                            <Grid item xs={12} md={3} lg={3}
                                                sx={{ display: 'flex', alignItems: 'center' }}>
                                                <Typography variant="pnspsFormParagraphBold">
                                                    <FormattedMessage id="targetVol" />:
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} md={9} lg={6}>
                                                <RadioGroup
                                                    aria-labelledby="radio-buttons-group-label"
                                                    id="issueId"
                                                    name="issueId"
                                                    defaultValue={issueId}
                                                    onChange={(event) => {
                                                        setIssueId(event.target.value);
                                                    }}
                                                >
                                                    {
                                                        selections
                                                    }
                                                </RadioGroup>
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={12} alignItems={"center"} sx={{ p: 2 }}>
                                        <table style={tabelStyle}>
                                            <tbody>
                                                <tr style={tabelStyle}>
                                                    <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans" /></th>
                                                    <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
                                                    <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
                                                </tr>
                                                <tr>
                                                    <td style={tabelStyle}>
                                                        <FormattedMessage id="payOnline" />
                                                        <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
                                                            setWarningTitle(intl.formatMessage({ id: "payOnline" }))
                                                            setWarningText(
                                                                <><FormattedMessage id="paymentMethodMeans" />
                                                                    <ul>
                                                                        <li><FormattedMessage id="fps" /></li>
                                                                        <li><FormattedMessage id="card" /></li>
                                                                        <li><FormattedMessage id="pps" /></li>
                                                                    </ul>
                                                                </>
                                                            );
                                                            setIsWarningPopUp(true);
                                                        }}><FormattedMessage id="viewDetail" /></a>
                                                    </td>
                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 2:00 p.m.</td>
                                                    <td style={tabelStyle}>
                                                        <FormattedMessage id="payOnlineRemark" values={{
                                                            date: DateUtils.dateFormat(closeDate, dft) + ' 2:30 p.m.'
                                                        }} />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style={tabelStyle}><FormattedMessage id="payDn" />
                                                        <br /><a href="#payDnDetails" onClick={() => {
                                                            setWarningTitle(intl.formatMessage({ id: "payDn" }))
                                                            setWarningText(
                                                                <><FormattedMessage id="paymentMethodMeans" />
                                                                    <ul>
                                                                        <li><FormattedMessage id="atm" /></li>
                                                                        <li><FormattedMessage id="pps" /></li>
                                                                        <li><FormattedMessage id="eBank" /></li>
                                                                        <li><FormattedMessage id="phoneBank" /></li>
                                                                        <li><FormattedMessage id="eCheque" /></li>
                                                                        <li><FormattedMessage id="fps" /></li>
                                                                        <li><FormattedMessage id="hkpo" /></li>
                                                                        <li><FormattedMessage id="store" /></li>
                                                                        <li><FormattedMessage id="post" /></li>
                                                                    </ul>
                                                                    <Typography variant="h6">
                                                                        <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "proofNote" }) }} />
                                                                    </Typography>  
                                                                </>
                                                            );
                                                            setIsWarningPopUp(true);
                                                        }}><FormattedMessage id="viewDetail" /></a>
                                                    </td>
                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} 5:00 p.m.</td>
                                                    <td style={tabelStyle}>
                                                        <FormattedMessage id="payDnRemark" values={{
                                                            date: DateUtils.dateFormat(closeDate, dft) + " 12:30 p.m."
                                                        }} />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style={tabelStyle}><FormattedMessage id="payNPGO" />
                                                        <br /><a href="#payNPGODetails" onClick={() => {
                                                            setWarningTitle(intl.formatMessage({ id: "payNPGO" }))
                                                            setWarningText(
                                                                <><FormattedMessage id="paymentMethodMeans" />
                                                                    <ul>
                                                                        <li><FormattedMessage id="cheque" /></li>
                                                                        <li><FormattedMessage id="cash" /></li>
                                                                    </ul>
                                                                </>
                                                            );
                                                            setIsWarningPopUp(true);
                                                        }}><FormattedMessage id="viewDetail" /></a>
                                                    </td>
                                                    <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} 12:00 p.m.</td>
                                                    <td style={tabelStyle}>
                                                        <FormattedMessage id="payNPGORemark" values={{
                                                            date: DateUtils.dateFormat(closeDate, dft) + " 12:30 p.m."
                                                        }} />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>

                                    </Grid>

                                    <Grid item xs={12} md={12} lg={12}>
                                        <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                            <Grid item xs={12} md={3} lg={3}
                                                sx={{ display: 'flex', alignItems: 'center' }}>
                                                <Typography variant="pnspsFormParagraphBold">
                                                    <FormattedMessage id="draftFile" /> ({intl.formatMessage({ id: 'fileSizeWarning' })}):
                                                </Typography>
                                            </Grid>
                                            <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
                                                <input
                                                    id="uploadFileBtn"
                                                    name="file"
                                                    type="file"
                                                    accept=".doc,.docx,.xls,.xlsx"
                                                    style={{ display: 'none' }}
                                                    onChange={(event) => {
                                                        readFile(event)
                                                    }}
                                                />
                                                {attachment.name}
                                            </Grid>
                                            {/* <Grid item xs={12} md={3} lg={3}>
                                                <label htmlFor="uploadFileBtn">
                                                    <Button
                                                        aria-label={intl.formatMessage({id: 'uploadFileBtn'})}
                                                        component="span"
                                                        variant="outlined"
                                                        size="large"
                                                    >{attachment ? intl.formatMessage({id: 'uploadFileBtn'}) : intl.formatMessage({id: 'reUpload'})}</Button>
                                                </label>
                                            </Grid> */}
                                        </Grid>
                                    </Grid>
                                    <Grid item xs={12} md={12} lg={12}>
                                        <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                            <Grid item xs={12} md={3} lg={3}
                                                sx={{ display: 'flex', alignItems: 'center' }}>
                                            </Grid>
                                            <Grid item xs={12} md={6} lg={6} >
                                                <label htmlFor="uploadFileBtn">
                                                    <Button
                                                        aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
                                                        component="span"
                                                        variant="outlined"
                                                        size="large"
                                                    >{attachment ? intl.formatMessage({ id: 'uploadFileBtn' }) : intl.formatMessage({ id: 'reUpload' })}</Button>
                                                </label>
                                            </Grid>
                                            <Grid item xs={12} md={3} lg={3}>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                    {isORGLoggedIn() ?
                                        <>
                                            {isDummyLoggedIn() ?
                                                <Grid item xs={12} md={12} lg={12}>
                                                    {FieldUtils.getCarOfField({
                                                        label: intl.formatMessage({ id: 'careOf' }) + ":",
                                                        valueName: "careOfDum",
                                                        form: formik,
                                                        // disabled: true
                                                    })}
                                                </Grid>
                                                :
                                                <Grid item xs={12} md={12} lg={12}>
                                                    {FieldUtils.getCarOfField({
                                                        label: intl.formatMessage({ id: 'careOf' }) + ":",
                                                        valueName: "careOf",
                                                        form: formik,
                                                        // disabled: true
                                                    })}
                                                </Grid>

                                            }
                                            <Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}>
                                                <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
                                                    <FormattedMessage id="noteOnClientRemark" />
                                                </Typography>
                                            </Grid>
                                        </>
                                        :
                                        null

                                    }

                                    {
                                        isDummyLoggedIn() ?
                                            <Grid item xs={12} md={12} lg={12}>
                                                {FieldUtils.getTextField({
                                                    label: intl.formatMessage({ id: 'userContactEmail' }),
                                                    valueName: "emailAddress",
                                                    form: formik
                                                })}
                                            </Grid>
                                            :
                                            <Grid item xs={12} md={12} lg={12}>
                                                {FieldUtils.getTextArea({
                                                    label: intl.formatMessage({ id: 'extraMark' }) + ":",
                                                    valueName: "remarks",
                                                    form: formik,
                                                    inputProps: { maxLength: 255 }
                                                })}
                                            </Grid>
                                    }

                                    <Grid item xs={12}>
                                        <Typography variant="h6" height="100%" >
                                            <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "tradeMarkFootnote" }) }} />
                                        </Typography>
                                    </Grid>


                                    <Grid item xs={12}>
                                        <Stack direction="row">
                                            <Checkbox
                                                checked={tickAccept}
                                                onChange={(event) => {
                                                    setTickAccept(event.target.checked)
                                                }}
                                                name="tickAccept"
                                                color="primary"
                                                size="small"
                                            />
                                            <Typography variant="h6" height="100%" >
                                                <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickStr" }) }} />
                                            </Typography>
                                        </Stack>
                                    </Grid>

                                    <Grid item xs={12}>
                                        <center>
                                            <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                                <Button
                                                    aria-label={intl.formatMessage({ id: 'applyPublicNotice' })}
                                                    variant="contained"
                                                    type="submit"
                                                    disabled={!tickAccept}
                                                >
                                                    <FormattedMessage id="applyPublicNotice" />
                                                </Button>
                                            </ThemeProvider>
                                        </center>
                                    </Grid>




                                </Grid>
                            </form>
                        </Box>
                    </Grid>
            }
            <div>
                <Dialog
                    open={isWarningPopUp}
                    onClose={() => setIsWarningPopUp(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <DialogTitle>
                        {warningTitle}
                    </DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h5" style={{ padding: '16px' }}>
                            {warningText}
                        </Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button
                            aria-label={intl.formatMessage({ id: 'ok' })}
                            onClick={() => {
                                if (val.contactPerson) {
                                    apply(val);
                                    setIsWarningPopUp(false);
                                } else {
                                    setIsWarningPopUp(false);
                                    if (reloadPage) {
                                        location.reload();
                                    }
                                }
                            }}
                        >
                            <FormattedMessage id="ok" />
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </Grid>
    );
};


export default PublicNoticeApplyForm;