// 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 {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 {
    getComboValueById,
    getComboValueByIdList, getComboValueByLabel,
    //getComboValueByLabel,
    getDateString,
    getIdList, getJSONIdList, isOptionEqualToValue, isStringEmptyAfterTrim
} from "../../utils/CommonFunction";
import Autocomplete from "@mui/material/Autocomplete";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {
    GET_APPRECIATION_CATEGORY_COMBO_LIST,
    GET_CLIENT_DEPARTMENT_COMBO_LIST,
    GET_SBU_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 {isObjEmpty} from "../../utils/Utils";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";

const uppyDashboard = new Uppy({
        autoProceed: true,
        logger: debugLogger,
        hideUploadButton: true,
        restrictions: {
            maxFileSize: 10 * 1024 * 1024, // 10 MB in bytes
        },
    })
;

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

const AppreciationForm = ({appreciationDetail, updateAppreciationDetail,
                          isNewRecord, isCollectData,
                          setIsCollectData, setUserConfirm, isEditing,
                          usedFileSize, recordId
}) => {
    const params = useParams();
    const [onReady, setOnReady] = useState(false);
    const [errors, setErrors] = useState({});
    const [fileErrors, setFileErrors] = useState({});
    const {register, getValues, setValue} = useForm();

    const [selectedDivisions, setSelectedDivisions] = useState([]);
    const [selectedDepartment, setSelectedDepartment] = useState(null);
    const [selectedCategory, setSelectedCategory] = useState(null);

    const [receiptDate, setReceiptDate] = useState(null);
    const [receiptDateError, setReceiptDateError] = React.useState(null);
    const receiptDateErrorMessage = React.useMemo(() => {
        switch (receiptDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [receiptDateError]);

    const [clientReplyDate, setClientReplyDate] = useState(null);
    const [clientReplyDateError, setClientReplyDateError] = React.useState(null);
    const clientReplyDateErrorMessage = React.useMemo(() => {
        switch (clientReplyDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [clientReplyDateError]);

    const [staffReplyDate, setStaffReplyDate] = useState(null);
    const [staffReplyDateError, setStaffReplyDateError] = React.useState(null);
    const staffReplyDateErrorMessage = React.useMemo(() => {
        switch (staffReplyDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [staffReplyDateError]);

    const [lnReceiptDate, setLNReceiptDate] = useState(null);
    const [lnReceiptDateError, setLNReceiptDateError] = React.useState(null);
    const lnReceiptDateErrorMessage = React.useMemo(() => {
        switch (lnReceiptDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [lnReceiptDateError]);

    const [sbuDivisionList, setSBUDivisionList] = useState([]);
    const [isSBUFetched, setisSBUFetched] = useState(false);

    const [departmentList, setDepartmentList] = useState([]);
    const [categoryList, setCategoryList] = useState([]);

    const [orgInput, setOrgInput] = useState("");

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

    const handleChange = (event) => {
        // Handle the changes here
        const newValue = event.target.value;
        console.log(newValue);
        if(newValue>999999999){
            setValue("noOfStaff", 999999999);
        }
        else if(newValue < 0){
            setValue("noOfStaff", 0);
        }
        // Perform any necessary actions with the new value
    };

    useEffect(()=>{
        if (!isObjEmpty(appreciationDetail)
            && categoryList.length > 0
            && sbuDivisionList.length > 0
            && isSBUFetched
        ) {
            uppyDashboard.cancelAll()
            //setSelectedCategory(getComboValueByLabel(categoryList,appreciationDetail.categoryName));
            setReceiptDate(
                appreciationDetail.receiptDate === null ? null : dayjs(getDateString(appreciationDetail.receiptDate))
            );
            setClientReplyDate(
                appreciationDetail.clientReplyDate === null ? null : dayjs(getDateString(appreciationDetail.clientReplyDate))
            );
            setStaffReplyDate(
                appreciationDetail.staffReplyDate === null ? null : dayjs(getDateString(appreciationDetail.staffReplyDate))
            );
            setLNReceiptDate(
                appreciationDetail.lnReceiptDate === null ? null : dayjs(getDateString(appreciationDetail.lnReceiptDate))
            );
            if(appreciationDetail.sbuIds !== null){
                const tempChannelIdList = Object.keys(appreciationDetail.sbuIds).length <= 0 ? null : getIdList(JSON.parse(appreciationDetail.sbuIds));
                setSelectedDivisions(tempChannelIdList === null ? null : getComboValueByIdList(sbuDivisionList, tempChannelIdList));
            }
            if(appreciationDetail.clientOrganization){
                setOrgInput(appreciationDetail.clientOrganization);
            }

            setSelectedDepartment(getComboValueByLabel(departmentList,appreciationDetail.clientDepartment));
            setSelectedCategory(getComboValueById(categoryList,appreciationDetail.aprCategoryId));

            setOnReady(true);
        }
        else if(params.id <0 ){
            setOnReady(true);
        }
    },[appreciationDetail,sbuDivisionList, categoryList,isSBUFetched]);

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

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

        if(isNewRecord){
            setOnReady(true);
        }

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

        if(isNewRecord){
            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 formErrors = {};
            const fileErrors = {};
            if(totalSize + usedFileSize > 10.0){
                formErrors.fileSize = '-The total size of attachments exceeds the limit. Please notice that the size of the attachment is limited to 10MB per appreciation. You can only attach ' + Math.floor(10-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 10MB per appreciation. You can only attach ' + Math.floor(10-usedFileSize) + " MB file more.";

            }


            if (selectedDivisions.length <= 0 ){
                formErrors.division = 'SBU / Division is required';
            }

            if (receiptDate === null){
                formErrors.receiptDate = 'Receipt Date is required';
            }

            if (lnReceiptDate === null){
                formErrors.lnReceiptDate = 'LN Receipt Date is required';
            }

            if (isStringEmptyAfterTrim(values.description)){
                formErrors.description = 'Brief Description is required';
            }

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

            if( orgInput.trim().length > 0 &&
                selectedDepartment != null
            ){
                formErrors.dptOrgError = "Please provide either client department or client organization but not both."
            }
            else if ( orgInput.trim().length === 0 &&
                selectedDepartment == null
            ){
                formErrors.dptOrgError = "Please provide client department or client organization."
            }

            setFileErrors(fileErrors);
            setErrors(formErrors);
            if (Object.keys(formErrors).length === 0 &&
                Object.keys(fileErrors).length === 0 &&
                !receiptDateError &&
                !clientReplyDateError &&
                !staffReplyDateError &&
                !lnReceiptDateError
            ) {
                let formData = new FormData();
                formData.append("id", isNewRecord ? params.id : recordId);
                formData.append("sbuIds", JSON.stringify(getJSONIdList(selectedDivisions)));
                if(receiptDate !== null){
                    formData.append("receiptDate",  receiptDate === null ? null : dayjs(receiptDate).format('YYYY-MM-DD'));
                }
                formData.append("description", values.description === null ? "" : values.description.trim());
                formData.append("clientDepartment", selectedDepartment === null ? "" : selectedDepartment.label);
                formData.append("clientOrganization", values.clientOrganization === null ? "" : values.clientOrganization.trim());
                formData.append("clientFullname", values.clientFullname === null ? "" : values.clientFullname.trim());
                formData.append("clientPost", values.clientPost === null ? "" : values.clientPost.trim());
                formData.append("venue", values.venue === null ? "" : values.venue.trim());
                if(clientReplyDate !== null){
                    formData.append("clientReplyDate",  clientReplyDate === null ? null : dayjs(clientReplyDate).format('YYYY-MM-DD'));
                }
                if(staffReplyDate !== null){
                    formData.append("staffReplyDate",  staffReplyDate === null ? null : dayjs(staffReplyDate).format('YYYY-MM-DD'));
                }
                formData.append("noOfStaff", values.noOfStaff == null ? "" : values.noOfStaff );
                if(lnReceiptDate !== null){
                    formData.append("lnReceiptDate",  lnReceiptDate === null ? null : dayjs(lnReceiptDate).format('YYYY-MM-DD'));
                }
                formData.append("aprCategoryId", selectedCategory.id);
                formData.append("remarks", values.remarks);
                for (const file of uploadFileList) {
                    formData.append("files",file);
                }
                updateAppreciationDetail(formData);
            }
            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={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">
                                        SBU / Division:
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <Autocomplete
                                        multiple
                                        id="sbu-division-combo"
                                        size="small"
                                        disablePortal
                                        options={sbuDivisionList}
                                        disabled={!isEditing}
                                        value={selectedDivisions === null? [] : selectedDivisions}
                                        getOptionLabel={(option) => option.label}
                                        onChange={(event, newValue) => {
                                            setSelectedDivisions(newValue);
                                        }}
                                        renderInput={(params) => (
                                            <TextField
                                                error={!!errors.division}
                                                helperText={
                                                    errors.division ? (
                                                        <Typography component="div" color="error">
                                                            {errors.division.split("\n").map((line, index) => {
                                                                return (
                                                                    <Typography key={index} >
                                                                        {line}
                                                                    </Typography>
                                                                )
                                                            })}
                                                        </Typography>
                                                    ) : null
                                                }
                                                {...params}
                                                required
                                                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={"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">
                                        Receipt Date:
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="receiptDate"
                                                size="small"
                                                value={receiptDate === null ? null : dayjs(receiptDate)}
                                                onChange={(newValue) => setReceiptDate(newValue)}
                                                format="DD/MM/YYYY"
                                                error={!!errors.receiptDate}
                                                helperText={errors.receiptDate}
                                                onError={(newError) => setReceiptDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        error: !!errors.receiptDate || receiptDateError,
                                                        helperText: receiptDateError ? receiptDateErrorMessage : errors.receiptDate,
                                                    },
                                                }}
                                                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="lionerSize" component="span">
                                        LN Receive Date:
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="lnReceiptDate"
                                                size="small"
                                                value={lnReceiptDate === null ? null : dayjs(lnReceiptDate)}
                                                onChange={(newValue) => setLNReceiptDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setLNReceiptDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        error: !!errors.lnReceiptDate || lnReceiptDateError,
                                                        helperText: lnReceiptDateError ? lnReceiptDateErrorMessage : errors.lnReceiptDate,
                                                    },
                                                }}
                                                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.5}>
                                    <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={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={1.9}
                                      sx={{ml: 3, mr: 3, mt:0.8, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="body1" component="span">
                                        <Typography variant="lionerSize" component="span">
                                            Brief Description:
                                            <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                        </Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={9.1}>
                                    <TextField
                                        fullWidth
                                        {...register("description",
                                            {
                                                value: appreciationDetail.description,
                                            })}
                                        id='description'
                                        inputProps={{style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '1000vh' },
                                        }}
                                        multiline
                                        minRows={5}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                        error={!!errors.description}
                                        helperText={errors.description}
                                    />
                                </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">
                                            Venue Involved:
                                        </Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <TextField
                                        fullWidth
                                        {...register("venue",
                                            {
                                                value: appreciationDetail.venue,
                                            })}
                                        id='venue'
                                        inputProps={{maxLength: 255, 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>
                                <Grid item xs={12} s={12} md={12} lg={12} sx= {{mb: 1.5}}>
                                    <Grid container alignItems={"flex-start"}>
                                        <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">
                                                    Client Department:
                                                </Typography>
                                            </Typography>
                                        </Grid>

                                        <Grid item xs={7} s={7} md={7} lg={6.5}>
                                            <Autocomplete
                                                disablePortal
                                                id="department-combo"
                                                size="small"
                                                value={selectedDepartment === null? null : selectedDepartment}
                                                options={departmentList}
                                                onChange={(event, newValue) => {
                                                    setSelectedDepartment(newValue);
                                                }}
                                                disabled={!isEditing}
                                                renderInput={(params) =>
                                                    <TextField
                                                        error={!!errors.dptOrgError}
                                                        helperText={errors.dptOrgError}
                                                        {...params}
                                                        disabled={!isEditing}
                                                        multiline
                                                        maxRows={10}
                                                        InputProps={{
                                                            ...params.InputProps,
                                                            inputProps: {
                                                                ...params.inputProps,
                                                                maxLength: 255
                                                            }
                                                        }}
                                                    />}
                                                isOptionEqualToValue={isOptionEqualToValue}
                                            />
                                        </Grid>
                                    </Grid>
                                </Grid>

                                <Grid item xs={12} s={12} md={12} lg={12} sx= {{mb: 1.5}}>
                                    <Grid container alignItems={"flex-start"}>
                                        <Grid item xs={4} s={4} md={4} lg={4}
                                            sx={{ml: 12, alignItems: 'center'}}>
                                            <Typography variant="body1" component="span">
                                                <Typography variant="lionerSize" component="span">
                                                    or
                                                </Typography>
                                            </Typography>
                                        </Grid>

                                        <Grid item xs={7} s={7} md={7} lg={6.5}>
                                        </Grid>
                                    </Grid>
                                </Grid>

                                <Grid item xs={12} s={12} md={12} lg={12}>
                                    <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">
                                                Client Organization :
                                            </Typography>
                                        </Grid>

                                        <Grid item xs={7} s={7} md={7} lg={6.5}>
                                            <TextField
                                                fullWidth
                                                {...register("clientOrganization",
                                                    {
                                                        value: appreciationDetail.clientOrganization,
                                                    })}
                                                onChange={(event) => {
                                                    const newValue = event.target.value;
                                                    setOrgInput(newValue);
                                                }}
                                                error={!!errors.dptOrgError}
                                                helperText={errors.dptOrgError}
                                                id='clientOrganization'
                                                disabled={!isEditing}
                                                multiline
                                                maxRows={10}
                                                InputProps={{
                                                    style: { minHeight:'42.5px', maxHeight: '50vh' },
                                                }}
                                                inputProps={{maxLength: 255}}
                                                autoComplete="off"
                                            />
                                        </Grid>
                                    </Grid>
                                </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">
                                        Client Post :
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <TextField
                                        fullWidth
                                        {...register("clientPost",
                                            {
                                                value: appreciationDetail.clientPost,
                                            })}
                                        id='clientPost'
                                        disabled={!isEditing}
                                        multiline
                                        maxRows={10}
                                        inputProps={{maxLength: 255}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        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">
                                        Client Full Name :
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <TextField
                                        fullWidth
                                        {...register("clientFullname",
                                            {
                                                value: appreciationDetail.clientFullname,
                                            })}
                                        id='clientFullname'
                                        disabled={!isEditing}
                                        multiline
                                        maxRows={10}
                                        inputProps={{maxLength: 255}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        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">
                                        Client Reply Date:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="clientReplyDate"
                                                size="small"
                                                value={clientReplyDate === null ? null : dayjs(clientReplyDate)}
                                                onChange={(newValue) => setClientReplyDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setClientReplyDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        helperText: clientReplyDateErrorMessage,
                                                    },
                                                }}
                                                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="lionerSize" component="span">
                                        Staff Reply Date:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="staffReplyDate"
                                                size="small"
                                                value={staffReplyDate === null ? null : dayjs(staffReplyDate)}
                                                onChange={(newValue) => setStaffReplyDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setStaffReplyDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        helperText: staffReplyDateErrorMessage,
                                                    },
                                                }}
                                                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={"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">
                                        No. of Staff :
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <TextField
                                        fullWidth
                                        type="number"
                                        {...register("noOfStaff",
                                            {
                                                value: appreciationDetail.noOfStaff,
                                            })}
                                        InputProps={{
                                            inputProps: { min: 0, max: 999999999},
                                        }}
                                        id='noOfStaff'
                                        disabled={!isEditing}
                                        autoComplete="off"
                                        onChange={handleChange}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>


                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={1.9}
                                      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={9.1}>
                                    <TextField
                                        fullWidth
                                        {...register("remarks",
                                            {
                                                value: appreciationDetail.remarks,
                                            })}
                                        id='remarks'
                                        inputProps={{maxLength: 255, style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        multiline
                                        rows={5}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </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 this appreciation
                                        </Typography>
                                    </div>
                                    <Dashboard
                                        uppy={uppyDashboard}
                                        hideUploadButton={true}
                                        width="100%"
                                        height="30vh"
                                    />
                                </Grid>
                                :
                                undefined
                        }
                    </Grid>
                </form>
            </MainCard>
    );
};

export default AppreciationForm;
