// material-ui
import {
    Grid, TextField, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import {Dashboard} from "@uppy/react";
import Uppy, { debugLogger } from '@uppy/core';
import {useLocation, useParams} from "react-router-dom";
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/webcam/dist/style.min.css';
import {
    convertXmlToObject,
    getComboValueByIdList,
    getComboValueByLabel, getDateString,
    getDeletedRecordWithRefList,
    getIdList, getNewRecordWithRefList, isOptionEqualToValue, isStringEmptyAfterTrim
} from "../../utils/CommonFunction";
import Autocomplete from "@mui/material/Autocomplete";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {
    CHECK_AWARD_DUPLICATE,
    GET_CATEGORY_COMBO_LIST,
    GET_LDAP_USER_LIST,
    GET_PROMOTION_CHANNEL_COMBO_LIST,
    GET_SUB_DIVISION_COMBO_LIST,
} from "../../utils/ApiPathConst";
import {GENERAL_RED_COLOR} from "../../themes/colorConst";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import {DemoItem} from "@mui/x-date-pickers/internals/demo";
import {DatePicker} from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import {parseString} from "xml2js";
import {isObjEmpty} from "../../utils/Utils";
import Qs from "qs";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";

const uppyDashboard = new Uppy({
        autoProceed: true,
        logger: debugLogger,
        hideUploadButton: true,
        restrictions: {
            maxFileSize: 512 * 1024 * 1024, // 512 MB in bytes
        },
    })
    //.use(ThumbnailGenerator, {thumbnailWidth: 200})
    //.use(XHR, { endpoint: 'https://your-domain.com/upload' })
;

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

const AwardForm = ({eventDetail, applicationDetail, awardDetail, updateAwardDetail,
                          isNewRecord, isCollectData,
                          refSubDivisionList,
                          setIsCollectData, setUserConfirm, isEditing,
                          usedFileSize,videoCount,
                          eventName,applicationName
}) => {
    const params = useParams();
    const [onReady, setOnReady] = useState(false);
    const [errors, setErrors] = useState({});
    const [fileErrors, setFileErrors] = useState({});
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const refId = queryParams.get("refId");

    const {register, getValues, setValue} = useForm();
    const [selectedChannels, setSelectedChannels] = useState([]);
    const [selectedOfficer, setSelectedOfficer] = useState(null);
    const [selectedSubDivision, setSelectedSubDivision] = useState([]);
    const [selectedCategory, setSelectedCategory] = useState(null);
    const [receiveDate, setReceiveDate] = useState(null);
    const [receiveDateError, setReceiveDateToError] = React.useState(null);

    const receiveDateErrorMessage = React.useMemo(() => {
        switch (receiveDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [receiveDateError]);

    const [channelList, setChannelList] = useState([]);
    const [isChannelFetched, setIsChannelFetched] = useState(false);

    const [subDivisionList, setSubDivisionList] = useState([]);
    const [categoryList, setCategoryList] = useState([]);

    const [lotusNoteUserList, setLotusNoteUserList] = useState([])
    const handleLocationCodeChange = (event, value) => {
        setSelectedOfficer({
            label: value,
        });
        if (value.length >2 && !value.includes("(")) {
            fetchLotusUserList(value, false);
        } else {
            setLotusNoteUserList(lotusNoteUserList);
        }
    };
    // Function to fetch user name options based on locationCode
    const fetchLotusUserList = async (input, isInit) => {
        try {
            axios.get(`${apiPath}${GET_LDAP_USER_LIST}`,{
                params:{
                    "EMSDlotus": input,
                }
            })
                .then((response) => {
                    if (response.status === 200) {
                        let xml = response.data;
                        parseString(xml, function (err, result) {
                            if(!isObjEmpty(awardDetail) && isInit){
                                setSelectedOfficer({
                                        label: awardDetail.responsibleOfficer,
                                    });
                            }
                            setLotusNoteUserList(convertXmlToObject(result.RECORDS.RECORD));
                        });

                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
        } catch (error) {
            console.error('Error fetching user name options:', error);
        }
    };

    uppyDashboard.on('file-added', (/*file*/) => {
        uppyDashboard.setOptions({
            hideUploadButton: true,
        });
    });

    useEffect(()=>{
        if (!isObjEmpty(awardDetail)
            && subDivisionList.length > 0
            && categoryList.length > 0
            && isChannelFetched
        ) {
            uppyDashboard.cancelAll()
            if(refId !== null){
                setValue("name", awardDetail.name);
                setValue("nameCht", awardDetail.nameCht);
                setValue("physicalAward", awardDetail.physicalAward);
                setValue("remarks", awardDetail.remarks);
                setValue("storageLocation", awardDetail.storageLocation);
            }
            setSelectedCategory(getComboValueByLabel(categoryList,awardDetail.categoryName));
            setSelectedSubDivision(getComboValueByIdList(subDivisionList,refSubDivisionList));
            setReceiveDate(
                awardDetail.receiveDate === null ? null : dayjs(getDateString(awardDetail.receiveDate))
            );
            if(awardDetail.promotionChannel !== null){
                const tempChannelIdList = Object.keys(awardDetail.promotionChannel).length <= 0 ? null : getIdList(JSON.parse(awardDetail.promotionChannel));
                setSelectedChannels(tempChannelIdList === null ? null : getComboValueByIdList(channelList, tempChannelIdList));
            }
            //const locationCode = awardDetail.responsibleOfficer.split('(')[1].replace(')','');
            fetchLotusUserList(awardDetail.responsibleOfficer, true);
            setOnReady(true);
        }
        else if(params.id <0 && refId === null){
            setOnReady(true);
        }
    },[awardDetail,subDivisionList,categoryList,isChannelFetched]);

    useEffect(()=>{
        if(!isObjEmpty(awardDetail)){
                axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_LIST}`,{
                // axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_FOR_AWARD_LIST}`,{
                // params: {
                //     "applicationId": awardDetail.applicationId
                // },
                paramsSerializer: function (params) {
                    return Qs.stringify(params, { arrayFormat: 'repeat' });
                },
            })
                .then((response) => {
                    if (response.status === 200) {
                        setSubDivisionList(response.data.records);
                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
        }
        else if(isNewRecord){
                axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_LIST}`,{
                // axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_FOR_AWARD_LIST}`,{
                // params: {
                //     "applicationId": params.applicationId
                // },
                paramsSerializer: function (params) {
                    return Qs.stringify(params, { arrayFormat: 'repeat' });
                },
            })
                .then((response) => {
                    if (response.status === 200) {
                        setSubDivisionList(response.data.records);
                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
        }
    },[awardDetail])

    useEffect(() => {
        uppyDashboard.cancelAll()
        //if state data are ready and assign to different field
        axios.get(`${apiPath}${GET_CATEGORY_COMBO_LIST}`)
            .then((response) => {
                if (response.status === 200) {
                    setCategoryList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });

        axios.get(`${apiPath}${GET_PROMOTION_CHANNEL_COMBO_LIST}`)
            .then((response) => {
                if (response.status === 200) {
                    setIsChannelFetched(true);
                    setChannelList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });

        if(isNewRecord && refId === null){
            setOnReady(true);
        }
    }, []);

    useEffect(() => {
        //upload latest data to parent
        if(isCollectData){
            const values = getValues();
            const uploadFileList = [];
            const fileList = uppyDashboard.getFiles();
            const files = uppyDashboard.getFiles();
            if(files.length > 0) {
                for (const file of fileList) {
                    uploadFileList.push(file.data);
                }
            }
            let totalSize = files.reduce((total, file) => total + file.size, 0);
            totalSize = totalSize/1024/1024;
            const videoFiles = files.filter(file =>
                file.type.startsWith('video/') || /\.(mp4|mov|avi|mkv)$/i.test(file.name)
            );

            const videoAttachCount = videoFiles.length;
            const formErrors = {};
            const fileErrors = {};
            if(totalSize + usedFileSize > 500.0){
                formErrors.fileSize = '-The total size of attachments exceeds the limit. Please notice that the size of the attachment is limited to 100MB per application and 500MB per award. You can only attach ' + Math.floor(500-usedFileSize) + " MB file more.";
                fileErrors.fileSize = '-The total size of attachments exceeds the limit. Please notice that the size of the attachment is limited to 100MB per application and 500MB per award. You can only attach ' + Math.floor(500-usedFileSize) + " MB file more.";

            }
            if(videoCount >= 1 && videoAttachCount >= 1){
                formErrors.fileRef = '-Total number of videos exceeds the limit, please delete existing uploaded video, or stop uploading new videos.';
                fileErrors.fileRef = '-Total number of videos exceeds the limit, please delete existing uploaded video, or stop uploading new videos.';
            }
            if(videoAttachCount>1){
                formErrors.fileRef = '-Total number of videos exceeds the limit, please delete existing uploaded video, or stop uploading new videos.';
                fileErrors.fileRef = '-Total number of videos exceeds the limit, please delete existing uploaded video, or stop uploading new videos.';
            }

            if (isStringEmptyAfterTrim(values.name)) {
                formErrors.name = 'Award Name is required';
            }

            if (selectedCategory === null){
                formErrors.category = 'Category is required';
            }

            if (selectedOfficer === null){
                formErrors.officer = 'Officer is required';
            }else if(selectedOfficer.label.trim().length === 0){
                formErrors.officer = 'Officer is required';

            }

            if (selectedSubDivision.length <= 0){
                formErrors.subDivision = 'Sub-Division is required';
            }

            setFileErrors(fileErrors);
            setErrors(formErrors);
            if (Object.keys(formErrors).length === 0 && !receiveDateError) {
                axios.get(`${apiPath}${CHECK_AWARD_DUPLICATE}`,
                    {
                        params: {
                            "name": values.name.trim(),
                            "id": params.id,
                            "applicationId": isNewRecord? params.applicationId : awardDetail.applicationId,
                        },
                    })
                    .then((response) => {
                        if (response.status === 200) {
                            const formErrors = {};
                            if(response.data.isTaken){
                                formErrors.name = 'Award name must be unique for the same application.';
                                setErrors(formErrors);
                                setIsCollectData(false);
                                setUserConfirm(false);
                            }
                            else if(!response.data.isTaken){
                                if (Object.keys(formErrors).length === 0) {
                                    let formData = new FormData();
                                    formData.append("id", isNewRecord ? params.id : awardDetail.id);
                                    formData.append("applicationId", isNewRecord ? params.applicationId : awardDetail.applicationId);
                                    formData.append("name", values.name.trim());
                                    formData.append("nameCht", values.nameCht === null ? "" : values.nameCht.trim());
                                    formData.append("remarks", values.remarks === null ? "" : values.remarks.trim());
                                    formData.append("categoryId", selectedCategory == null ? "" : selectedCategory.id);
                                    if(receiveDate !== null){
                                        formData.append("receiveDate",  receiveDate === null ? null : dayjs(receiveDate).format('YYYY-MM-DD'));
                                    }
                                    formData.append("storageLocation",  values.storageLocation === null ? "" : values.storageLocation.trim());
                                    formData.append("physicalAward",  values.physicalAward === null ? "" : values.physicalAward.trim());
                                    formData.append("responsibleOfficer", selectedOfficer == null ? "" : selectedOfficer.label.trim());
                                    formData.append("promotionChannel", JSON.stringify(selectedChannels));
                                    formData.append("subDivisionIdList", isNewRecord ? getIdList(selectedSubDivision) : selectedSubDivision == null ? [] : getNewRecordWithRefList(refSubDivisionList,getIdList(selectedSubDivision)));
                                    formData.append("subDivisionRemoveIdList", isNewRecord ? [] : selectedSubDivision == null ? [] : getDeletedRecordWithRefList(refSubDivisionList,getIdList(selectedSubDivision)));
                                    for (const file of uploadFileList) {
                                        formData.append("files",file);
                                    }
                                    updateAwardDetail(formData);
                                }
                            }
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        return true;
                    });
            }
            else if(isCollectData){
                setUserConfirm(false);
                setIsCollectData(false);
            }
        }
    }, [isCollectData]);

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard elevation={0}
                      content={false}
                      sx={{width:CARD_MAX_WIDTH}}
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                    Information
                </Typography>

                <form>
                    <Grid container>
                        <Grid item xs={12} s={12} md={12} lg={8} sx={{mt:1, ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={2.7}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                    Event Name:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={8}>
                                    <Typography variant="lionerSize" component="span">
                                    {isNewRecord? eventDetail.name : eventName}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={8} sx={{mt:1, ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={2.7}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                    Application Name:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={8}>
                                    <Typography variant="lionerSize" component="span">
                                    {isNewRecord? applicationDetail.name : applicationName}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </Grid>
                        
                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="body1" component="span">
                                        <Typography variant="lionerSize" component="span">
                                            Award Name:
                                        </Typography>
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("name",
                                            {
                                                value: awardDetail.name,
                                            })}
                                        id='applicationName'
                                        required
                                        error={!!errors.name}
                                        helperText={errors.name}
                                        inputProps={{maxLength: 500, style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        multiline
                                        maxRows={3}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, mt:0.8, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="body1" component="span">
                                        <Typography variant="lionerSize" component="span">
                                            Award Name Chinese:
                                        </Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("nameCht",
                                            {
                                                value: awardDetail.nameCht,
                                            })}
                                        id='nameCht'
                                        inputProps={{maxLength: 255, style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        multiline
                                        maxRows={3}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, mt:0.8, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="body1" component="span">
                                        <Typography variant="lionerSize" component="span">
                                            Remarks:
                                        </Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("remarks",
                                            {
                                                value: awardDetail.remarks,
                                            })}
                                        id='remarks'
                                        inputProps={{maxLength: 500, style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        multiline
                                        rows={5}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, mt:0.8, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Physical Award:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("physicalAward",
                                            {
                                                value: awardDetail.physicalAward,
                                            })}
                                        id='physicalAward'
                                        disabled={!isEditing}
                                        inputProps={{maxLength: 100}}
                                        autoComplete="off"
                                        helperText={
                                            <span style={{ color: '#888888' }}>e.g. Trophy, Cert, Medal or Electronic Doc</span>
                                        }
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                    Storage Location:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <TextField
                                        fullWidth
                                        {...register("storageLocation",
                                            {
                                                value: awardDetail.storageLocation,
                                            })}
                                        id='storageLocation'
                                        disabled={!isEditing}
                                        inputProps={{maxLength: 255}}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Received Date:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="receiveDate"
                                                size="small"
                                                value={receiveDate === null ? null : dayjs(receiveDate)}
                                                onChange={(newValue) => setReceiveDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setReceiveDateToError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        helperText: receiveDateErrorMessage,
                                                    },
                                                }}
                                                disabled={!isEditing}
                                            />
                                        </DemoItem >
                                    </LocalizationProvider>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="body1" component="span">
                                        <Typography variant="lionerSize" component="span">
                                        Category:
                                        </Typography>
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                        disablePortal
                                        id="category-combo"
                                        size="small"
                                        value={selectedCategory === null? null : selectedCategory}
                                        options={categoryList}
                                        onChange={(event, newValue) => {
                                            setSelectedCategory(newValue);
                                        }}
                                        disabled={!isEditing}
                                        renderInput={(params) =>
                                            <TextField
                                                error={!!errors.category}
                                                helperText={errors.category}
                                                {...params}
                                                disabled={!isEditing}
                                            />}
                                        isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="body1" component="span">
                                        <Typography variant="lionerSize" component="span">
                                            Responsible Officer:
                                        </Typography>
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                        disablePortal
                                        id="lotus-note-combo"
                                        value={selectedOfficer === null ? null : selectedOfficer}
                                        options={lotusNoteUserList}
                                        size="small"
                                        onInputChange={handleLocationCodeChange}
                                        disabled={!isEditing}
                                        freeSolo
                                        onChange={(event, newValue) => {
                                            setSelectedOfficer(newValue);
                                            //if(lotusNoteUserList.length >0){
                                                // if(newValue !== null){
                                                //     if(getComboValueByLabel(lotusNoteUserList, newValue.label) !== null){
                                                //         setSelectedOfficer(newValue);
                                                //     }
                                                // }
                                                // else{
                                                //     setSelectedOfficer(null);
                                                // }
                                            //}
                                        }}
                                        renderInput={(params) =>
                                            <TextField
                                                error={!!errors.officer}
                                                helperText={errors.officer}
                                                {...params}
                                                disabled={!isEditing}
                                                InputProps={{
                                                    ...params.InputProps,
                                                    inputProps: {
                                                        ...params.inputProps,
                                                        maxLength: 100
                                                    }
                                                }}
                                            />}
                                        //isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, mt:1.5,display: 'flex', alignItems: 'flext-start'}}>
                                    <Typography variant="body1" component="span">
                                        <Typography variant="lionerSize" component="span">
                                            Sub-Divisions:
                                        </Typography>
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                        multiple
                                        id="sub-division-demo"
                                        size="small"
                                        disablePortal
                                        options={subDivisionList}
                                        value={selectedSubDivision === null? [] : selectedSubDivision}
                                        getOptionLabel={(option) => option.label}
                                        onChange={(event, newValue) => {
                                            setSelectedSubDivision(newValue);
                                        }}
                                        disabled={!isEditing}
                                        renderInput={(params) => (
                                            <TextField
                                                error={!!errors.subDivision}
                                                helperText={errors.subDivision}
                                                {...params}
                                                placeholder=""
                                                disabled={!isEditing}
                                            />
                                        )}
                                        isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, mt:1.5, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Promotion Channels:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <Autocomplete
                                        multiple
                                        id="channel-combo"
                                        size="small"
                                        disablePortal
                                        options={channelList}
                                        disabled={!isEditing}
                                        value={selectedChannels === null? [] : selectedChannels}
                                        getOptionLabel={(option) => option.label}
                                        onChange={(event, newValue) => {
                                            setSelectedChannels(newValue);
                                        }}
                                        renderInput={(params) => (
                                            <TextField
                                                {...params}
                                                placeholder=""
                                                disabled={!isEditing}
                                            />
                                        )}
                                        isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>



                        {
                            isEditing ?
                                <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3,mr:3,mb:3}}>
                                    {
                                        fileErrors.fileSize ?
                                            <div>
                                                <Typography variant="lionerSize" sx={{ color: GENERAL_RED_COLOR, ml:1 }} component="span">{fileErrors.fileSize}</Typography>
                                            </div>
                                            :
                                            undefined
                                    }
                                    {
                                        fileErrors.fileRef ?
                                            <div>
                                                <Typography variant="lionerSize" sx={{ color: GENERAL_RED_COLOR, ml:1 }} component="span">{fileErrors.fileRef}</Typography>
                                            </div>
                                            :
                                            undefined
                                    }
                                    <div>
                                        <Typography variant="lionerSize" sx={{ml:1}}>
                                            You may upload supplementary material for record, including relevant photos or document
                                        </Typography>
                                    </div>
                                    <Dashboard
                                        uppy={uppyDashboard}
                                        hideUploadButton={true}
                                        width="100%"
                                        height="30vh"
                                    />
                                </Grid>
                                :
                                undefined
                        }
                    </Grid>
                </form>
            </MainCard>
    );
};

export default AwardForm;
