// material-ui
import {
    Grid,
    Typography,
    Button,
    TextField,
    Stack, Box
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import ForwardIcon from '@mui/icons-material/Forward';
import Divider from '@mui/material/Divider';
import {useParams} from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { notifyActionSuccess } from 'utils/CommonFunction';
import { useIntl } from "react-intl";

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

const AnnouncementForm = ({ loadedData }) => {
    const intl = useIntl();
    const params = useParams();
    const navigate = useNavigate();

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


    const formik = useFormik({
        enableReinitialize: true,
        initialValues: loadedData,
        validationSchema: yup.object().shape({
            subjectEng: yup.string().max(255).required(),
            subjectCht: yup.string().max(255).required(),
            subjectChs: yup.string().max(255).required(),
            contentEng: yup.string().required(),
            contentCht: yup.string().required(),
            contentChs: yup.string().required(),
        }),
        onSubmit: values => {
            doSave(values);
        }
    });

    const doSave = (values) => {
        HttpUtils.post({
            url: UrlUtils.POST_ANNOUNCE_SAVE,
            params: {
                id: params?.id??0,
                announceDate: values.announceDate,
                subjectEng: values.subjectEng,
                subjectCht: values.subjectCht,
                subjectChs: values.subjectChs,

                contentEng: values.contentEng,
                contentCht: values.contentCht,
                contentChs: values.contentChs,
            },
            onSuccess: function () {
                notifyActionSuccess(intl.formatMessage({ id: 'submissionSuccess' }) + '!')
                navigate("/setting/announcement");
            }
        });
    }

    return (
        <Grid container sx={{ minHeight: '95vh', 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' } }}>
                            Announcement
                        </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} 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}>
                                <Button
                                    size="large"
                                    variant="contained"
                                    color="success"
                                    type="submit"
                                    sx={{
                                        textTransform: 'capitalize',
                                        alignItems: 'end'
                                    }}>
                                    <Typography variant="h5">Save</Typography>
                                </Button>
                            </Grid>

                            <Grid item xs={12} md={12}>
                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={2} lg={2}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">Announce Date:</Typography>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <TextField
                                            fullWidth
                                            size="small"
                                            type="datetime-local"
                                            onChange={formik.handleChange}
                                            name="announceDate"
                                            value={formik.values["announceDate"]}
                                            variant="outlined"
                                            sx={
                                                {
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                    width: '40%'
                                                }
                                            }
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider sx={{ width: '100%' }} /></Grid>
                            <Grid item xs={12} md={12}><Typography variant="h5">English</Typography></Grid>
                            <Grid item xs={12} md={12} >
                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={2} lg={2}
                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
                                        <Typography variant="h5">Subject:</Typography>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <TextField
                                            fullWidth
                                            size="small"
                                            type="text"
                                            onChange={formik.handleChange}
                                            name="subjectEng"
                                            value={formik.values["subjectEng"]}
                                            variant="outlined"
                                            error={Boolean(formik.errors["subjectEng"])}
                                            helperText={formik.errors["subjectEng"] ? formik.errors["subjectEng"] : ''}
                                            sx={
                                                {
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }
                                            }
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid item xs={12} md={12}>
                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={2} lg={2}
                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
                                        <Typography variant="h5">Content:</Typography>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <TextField
                                            multiline
                                            fullWidth
                                            rows={6}
                                            onChange={formik.handleChange}
                                            name="contentEng"
                                            value={formik.values["contentEng"]}
                                            error={Boolean(formik.errors["contentEng"])}
                                            helperText={formik.errors["contentEng"] ? formik.errors["contentEng"] : ''}
                                            variant="outlined"
                                            InputProps={
                                                {
                                                    style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
                                                }
                                            }
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider sx={{ width: '100%' }} /></Grid>
                            <Grid item xs={12} md={12}><Typography variant="h5">Traditional Chinese</Typography></Grid>
                            <Grid item xs={12} md={12}>
                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={2} lg={2}
                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
                                        <Typography variant="h5">Subject:</Typography>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <TextField
                                            fullWidth
                                            size="small"
                                            type="text"
                                            onChange={formik.handleChange}
                                            name="subjectCht"
                                            value={formik.values["subjectCht"]}
                                            error={Boolean(formik.errors["subjectCht"])}
                                            helperText={formik.errors["subjectCht"] ? formik.errors["subjectCht"] : ''}
                                            variant="outlined"
                                            sx={
                                                {
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }
                                            }
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid item xs={12} md={12}>
                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={2} lg={2}
                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
                                        <Typography variant="h5">Content:</Typography>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <TextField
                                            multiline
                                            fullWidth
                                            rows={6}
                                            onChange={formik.handleChange}
                                            name="contentCht"
                                            value={formik.values["contentCht"]}
                                            error={Boolean(formik.errors["contentCht"])}
                                            helperText={formik.errors["contentCht"] ? formik.errors["contentCht"] : ''}
                                            variant="outlined"
                                            InputProps={
                                                {
                                                    style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
                                                }
                                            }
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>



                            <Grid item xs={12} md={12} sx={{ mt: 2 }}><Divider sx={{ width: '100%' }} /></Grid>
                            <Grid item xs={12} md={12}><Typography variant="h5">Simplified Chinese</Typography></Grid>
                            <Grid item xs={12} md={12}>
                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={2} lg={2}
                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
                                        <Typography variant="h5">Subject:</Typography>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <TextField
                                            fullWidth
                                            size="small"
                                            type="text"
                                            onChange={formik.handleChange}
                                            name="subjectChs"
                                            value={formik.values["subjectChs"]}
                                            error={Boolean(formik.errors["subjectChs"])}
                                            helperText={formik.errors["subjectChs"] ? formik.errors["subjectChs"] : ''}
                                            variant="outlined"
                                            sx={
                                                {
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }
                                            }
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>


                            <Grid item xs={12} md={12}>
                                <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={2} lg={2}
                                        sx={{ display: 'flex', alignItems: 'center', pl: 4 }}>
                                        <Typography variant="h5">Content:</Typography>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <TextField
                                            multiline
                                            fullWidth
                                            rows={6}
                                            onChange={formik.handleChange}
                                            name="contentChs"
                                            value={formik.values["contentChs"]}
                                            error={Boolean(formik.errors["contentChs"])}
                                            helperText={formik.errors["contentChs"] ? formik.errors["contentChs"] : ''}
                                            variant="outlined"
                                            InputProps={
                                                {
                                                    style: { minHeight: '42.5px', maxHeight: '50vh', height: 'auto' },
                                                }
                                            }
                                        />
                                    </Grid>
                                </Grid>
                            </Grid>

                        </Grid>
                    </form>
                </Box>
            </Grid>

        </Grid>
    );
};


export default AnnouncementForm;
