// material-ui
import React from 'react';
import {
    Grid,
    Typography,
    Button,
    RadioGroup,
    Checkbox,
    Dialog, DialogTitle, DialogContent, DialogActions,
    Stack, Box,
    CircularProgress
} 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,
    isCreditorLoggedIn,
    // checkIsOnlyOnlinePaymentByIssueDate,
    checkIsOnlyOnlinePayment,
} 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 { useState, useEffect, useRef } from 'react';
import { checkPaymentSuspension } from "utils/Utils";

// ==============================|| 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 MMMM YYYY" : "YYYY年MM月DD日";

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

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

    const hasOptions = React.Children.count(selections) > 0;

    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)
                setPaymentCloseDate(data.paymentCloseDate)
                setClosingDateOff(data.closingDateOff)
                setOnlyOnlinePayment(checkIsOnlyOnlinePayment())
                
                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
                }
            }),
            custName: yup.string().max(150, getMaxErrStr(150)).test('checkCustNameFormat', intl.formatMessage({ id: 'requireCustName' }), function (value) {
                if (isDummyLoggedIn()) {
                    if (value !== undefined) {
                        return true
                    } else {
                        return false
                    }
                } else {
                    return true
                }
            }),
        }),
        onSubmit: values => {
            if (submittingRef.current) return;
            submittingRef.current = true;

            if (!values.issueId) {
                submittingRef.current = false;
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'requireTargetVol' }));
                setIsWarningPopUp(true);
                return;
            }
            if (!attachment) {
                submittingRef.current = false;
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'requireFile' }));
                setIsWarningPopUp(true);
                return;
            } else if (!attachment.size || attachment.size <= 0) {
                submittingRef.current = false;
                setWarningTitle(intl.formatMessage({ id: "attention" }))
                setWarningText(intl.formatMessage({ id: 'requireValidFile' }));
                setIsWarningPopUp(true);
                return;
            } else if (attachment.size >= (10 * 1024 * 1034)) {
                submittingRef.current = false;
                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) {
                            submittingRef.current = false;
                            setVal(values);
                            setWarningTitle(intl.formatMessage({ id: "attention" }))
                            setWarningText(intl.formatMessage({ id: 'dnOverdueWarning' }));
                            setIsWarningPopUp(true);
                        } else {
                            apply(values);
                        }
                    },
                    onFail: () => {
                        submittingRef.current = false;
                        setSubmitting(false);
                    },
                    onError: () => {
                        submittingRef.current = false;
                        setSubmitting(false);
                    }
                });
            } else {
                apply(values);
            }

        }
    });

    const apply = (values) => {
        setSubmitting(true)
        let careOf = values.careOf ?? "";
        let remarks = values.remarks ?? "";
        let custName = values.custName ?? "";
        if (isDummyLoggedIn()) {
            custName = values.custName
        }
        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,
                custName: custName,
                remarks: remarks,
            },
            files: [attachment],
            onSuccess: function (responData) {
                if (responData.msg) {
                    submittingRef.current = false;
                    setSubmitting(false);
                    setVal({});
                    setReloadPage(true);
                    setWarningTitle(intl.formatMessage({ id: "attention" }))
                    setWarningText(intl.formatMessage({ id: responData.msg }));
                    setIsWarningPopUp(true);
                    return;
                }
                submittingRef.current = false;
                setSubmitting(false);
                notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!')
                navigate("/publicNotice");
                // location.reload(); 
            },
            onFail: () => {
                submittingRef.current = false;
                setSubmitting(false);
            },
            onError: () => {
                submittingRef.current = false;
                setSubmitting(false);
            }
        });
    }

    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 component="h1" 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> */}
            <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' }}>

                    {hasOptions ? (

                    <form onSubmit={formik.handleSubmit}>
                                <Grid container spacing={1} sx={{ minHeight: '80vh' }} direction="row" justifyContent="flex-start" alignItems="center">
                                    {
                                        isDummyLoggedIn()?
                                        <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                            {FieldUtils.getTextField({
                                                label: intl.formatMessage({ id: 'applyPerson' }) + ":",
                                                valueName: "custName",
                                                form: formik,
                                                disabled: false,
                                                autoFocus: true
                                            })}
                                        </Grid>:
                                        <Grid item xs={12} md={12} lg={12} sx={{ mb: 1 }}>
                                            {FieldUtils.getTextField({
                                                label: intl.formatMessage({ id: 'applyPerson' }) + ":",
                                                valueName: "applyPerson",
                                                form: formik,
                                                disabled: true,
                                                autoFocus: false
                                            })}
                                        </Grid>
                                    }
                                    <Grid item xs={12} md={12}>
                                        {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>
                                    {isCreditorLoggedIn() ? 
                                        null
                                    :
                                        <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, verticalAlign: 'top'}}>
                                                            <FormattedMessage id="payOnline" />
                                                            {checkPaymentSuspension() && (
                                                                <Typography
                                                                    variant="body2"
                                                                    sx={{
                                                                        color: 'error.main',
                                                                        fontWeight: 600,
                                                                        mt: 0.5,
                                                                        ml:2
                                                                    }}
                                                                >
                                                                    <span
                                                                        dangerouslySetInnerHTML={{
                                                                            __html: intl.formatMessage({
                                                                                id: "suspensionMessageText",
                                                                                defaultMessage: ""
                                                                            })
                                                                        }}
                                                                    />
                                                                </Typography>
                                                            )}
                                                            <br /><a href="#payOnlineDetails" color='#fff' onClick={() => {
                                                                setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + 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);
                                                            }}><u><FormattedMessage id="viewDetail" /></u></a>
                                                        </td>
                                                        <td style={{ ...tabelStyle, verticalAlign: 'top'}}>{DateUtils.dateFormat(closeDate, dft)} {locale==='en'?"2:00 p.m.":"下午2時"}</td>
                                                        <td style={{ ...tabelStyle, verticalAlign: 'top'}}>
                                                            {DateUtils.dateFormat(paymentCloseDate, dft)}{" "}
                                                            {DateUtils.timeFormat(paymentCloseDate, locale)}
                                                        </td>
                                                    </tr>
                                                    {!isOnlyOnlinePayment?
                                                        <>
                                                            <tr>
                                                                <td style={tabelStyle}><FormattedMessage id="payDn" />
                                                                    <br /><a href="#payDnDetails" onClick={() => {
                                                                        setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + 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);
                                                                    }}><u><FormattedMessage id="viewDetail" /></u></a>
                                                                </td>
                                                                <td style={tabelStyle}>{DateUtils.dateFormat(closingDateOff, dft)} {locale==='en'?"5:00 p.m.":"下午5時"}</td>
                                                                <td style={tabelStyle}>
                                                                    <FormattedMessage id="payDnRemark" values={{
                                                                        date: DateUtils.dateFormat(closeDate, dft)
                                                                    }} />
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style={tabelStyle}><FormattedMessage id="payNPGO" />
                                                                    <br /><a href="#payNPGODetails" onClick={() => {
                                                                        setWarningTitle(intl.formatMessage({ id: "paymentMeans" }) + ": " + intl.formatMessage({ id: "payNPGOPopUpTitle" }))
                                                                        setWarningText(
                                                                            <><FormattedMessage id="paymentMethodMeans" />:
                                                                                <ul>
                                                                                    <li><FormattedMessage id="cheque" /></li>
                                                                                    <li><FormattedMessage id="drafts" /></li>
                                                                                    <li><FormattedMessage id="cashierOrders" /></li>
                                                                                    <li><FormattedMessage id="cash" /></li>
                                                                                </ul>
                                                                            </>
                                                                        );
                                                                        setIsWarningPopUp(true);
                                                                    }}><u><FormattedMessage id="viewDetail" /></u></a>
                                                                </td>
                                                                <td style={tabelStyle}>{DateUtils.dateFormat(closeDate, dft)} {locale==='en'?"12:00 p.m.":"下午12時"}</td>
                                                                <td style={tabelStyle}>
                                                                    <FormattedMessage id="payNPGORemark" values={{
                                                                        date: DateUtils.dateFormat(closeDate, dft)
                                                                    }} />
                                                                </td>
                                                            </tr>
                                                        </>:null
                                                    }
                                                </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>
                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}>
                                        <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
                                            <FormattedMessage id="uploadApplicationFileRemark" />
                                        </Typography>
                                    </Grid>
                                    {isORGLoggedIn() ?
                                        <>
                                            <Grid item xs={12} md={12} lg={12}>
                                                {FieldUtils.getCarOfField({
                                                    label: intl.formatMessage({ id: 'careOf' }) + ":",
                                                    valueName: "careOf",
                                                    form: formik,
                                                    inputProps: { "aria-label": intl.formatMessage({ id: 'careOf' }) }
                                                    // 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, "aria-label": intl.formatMessage({ id: 'extraMark' }) }
                                                })}
                                            </Grid>
                                    }

                                    <Grid item xs={12} mr={1} mb={2}>
                                        <Typography variant="pnspsFormParagraphBold">
                                            <span style={{ textAlign: 'justify', }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr0" }) }} />
                                        </Typography>
                                        <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }} >
                                            <ol style={{ textAlign: 'justify', }}>
                                                <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr1" }) }} />
                                                <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr2" }) }} />
                                                <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickUnderStr3" }) }} />
                                                <li dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "tradeMarkFootnote" }) }} />
                                            </ol>
                                        </Typography>
                                    </Grid>

                                    <Grid item xs={12}>
                                        <Stack direction="row">
                                            <Checkbox
                                                checked={tickAccept}
                                                onChange={(event) => {
                                                    setTickAccept(event.target.checked)
                                                }}
                                                name="tickAccept"
                                                color="primary"
                                                size="small"
                                                inputProps={{
                                                    "aria-label": intl.formatMessage({ id: "applyTickStr" })
                                                }}
                                            />
                                            <Typography variant="h6" height="100%" >
                                                <div style={{ padding: 12, textAlign: 'justify' }} 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 || isSubmitting}
                                                    startIcon={isSubmitting ? <CircularProgress size={20} color="inherit" /> : null}
                                                >
                                                    <FormattedMessage id="applyPublicNotice" />
                                                </Button>
                                            </ThemeProvider>
                                        </center>
                                    </Grid>

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

                                </Grid>
                            </form>
                            ) : null}
                </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: 'close' })}
                            onClick={() => {
                                if (val.contactPerson) {
                                    apply(val);
                                    setIsWarningPopUp(false);
                                } else {
                                    setIsWarningPopUp(false);
                                    if (reloadPage) {
                                        location.reload();
                                    }
                                }
                            }}
                        >
                            <FormattedMessage id="close" />
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </Grid>
    );
};


export default PublicNoticeApplyForm;
