import { toast } from 'react-toastify';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import { Button, Grid, TextField, Typography, InputLabel, FormControl } from '@mui/material';
import Dialog from '@mui/material/Dialog';
import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import {useEffect, useRef, useState} from 'react';
import { format } from 'date-fns';
import { GridOverlay } from '@mui/x-data-grid';
import axios from 'axios';
import {apiPath, getUserData} from '../auth/utils';
import {GENERAL_RED_COLOR, GENERAL_TEXT_COLOR} from '../themes/colorConst';
// import { Route } from '@mui/icons-material';
import { MuiFileInput } from 'mui-file-input';
import { POST_THUMBNAIL_PATH } from './ApiPathConst';
import { useForm } from 'react-hook-form';
import {isObjEmpty} from "./Utils";
import AttachFileIcon from '@mui/icons-material/AttachFile'
import CloudUploadIcon from '@mui/icons-material/CloudUpload';

//====================COMMON FUNCTION====================//
export function getUserAuthList() {
  const abilities = localStorage.getItem('abilities');
  if (abilities !== null) {
    const abilitiesList = abilities.split(',');
    return abilitiesList;
  }
  return [];
}

export function handleRouteAbility(canAccess, targetPage, redirectPage) {
  return canAccess ? targetPage : redirectPage;
}

export function readFile(input, curBlob, setCurBlob) {
  let reader = new FileReader();
  //console.log(input);
  reader.readAsArrayBuffer(input.data);
  reader.onload = function () {
    //console.log(reader.result);
    let temp = curBlob;
    temp[input.id] = reader.result;
    setCurBlob(temp);
  };
}

export function convertXmlToObject(xmlArray) {
  let output = [];
  for (let i = 0; i < xmlArray.length; i++) {
    let tempObj = {};
    const keys = Object.keys(xmlArray[i]);
    const values = Object.values(xmlArray[i]);
    tempObj['id'] = i;
    tempObj['key'] = i;
    let userType = '';
    let userFirstName = '';
    let userLastName = '';
    //let userNameZh = "";
    for (let j = 0; j < Object.keys(xmlArray[i]).length; j++) {
      if (values[j][0] === 'NULL') {
        tempObj[keys[j]] = null;
      } else {
        tempObj[keys[j]] = values[j][0];
      }

      // if(keys[j] === "EMSDknownas"){
      //     userNameZh = values[j][0];
      // }

      if (keys[j] === 'EMSDlotus') {
        userType = values[j][0];
      }

      if (keys[j] === 'EMSDlastname') {
        userLastName = values[j][0];
      }

      if (keys[j] === 'EMSDfirstname') {
        userFirstName = values[j][0];
      }
    }
    let displayLabel = userFirstName + ' ' + userLastName + ' (' + userType + ')';
    tempObj['label'] = displayLabel;
    if(displayLabel.trim() !== "()" && displayLabel.trim().length > 3){
        output.push(tempObj);
    }
  }
  return output;
}

//Get user added record by compare with the original data
export function getDeletedRecordWithRefList(referenceList, updatedList) {
  return referenceList.filter((x) => !updatedList.includes(x));
}

//Get user deleted record by compare with the original data
export function getNewRecordWithRefList(referenceList, updatedList) {
  return updatedList.filter((x) => !referenceList.includes(x));
}

//Get single combo value by using of label
export function getComboValueByLabel(comboList, input) {
  for (let i = 0; i < comboList.length; i++) {
    if (comboList[i].label === input) {
      return comboList[i];
    }
  }
  return (input === undefined || input === "") ? null : input;
}

export function getComboValueById(comboList, input) {
    for (let i = 0; i < comboList.length; i++) {
        if (comboList[i].id === input) {
            return comboList[i];
        }
    }
    return input === undefined ? null : input;
}


export const getRowHeight = (params, fieldName, lengthToSplit) => {
  let temp = params.model[fieldName];
  //console.log(temp);
  if(!isObjEmpty(temp)){
      const SINGLE_LINE_HEIGHT = 40;
      const HEIGHT_WITH_PADDING = 35;
      const LINE_HEIGHT = 25; // Adjust this value based on your font size and row padding
      const numberOfLines = Math.ceil(temp.length / lengthToSplit); // Change 50 to your desired line length
      const height = numberOfLines < 2 ? SINGLE_LINE_HEIGHT : HEIGHT_WITH_PADDING*2 + (LINE_HEIGHT * (numberOfLines-2) );
      //console.log(height);
      return height <= SINGLE_LINE_HEIGHT ? SINGLE_LINE_HEIGHT : height;
  }
  else {
      return 40;
  }
  };

//Get multi combo value by using of id
export function getComboValueByIdList(comboList, idList) {
  if (!isObjEmpty(idList) && idList !== undefined) {
    const output = idList.map(function (id) {
      for (let i = 0; i < comboList.length; i++) {
        if (comboList[i].id === id) {
          return comboList[i];
        }
      }
    })
    .filter(Boolean); // Filter out undefined values from the output array
    return output;
  }
  return [];
}


//Check if user subDivisionId in List
export function isUserDivisionIdInList(input, idList) {
  if (idList.length < 1) {
    return false;
  }
  for (let i = 0; i < idList.length; i++) {
    if (idList[i] === parseInt(input)) {
      return true;
    }
  }
  return false;
}

//Format List to String by using comma
export function castListToString(input) {
  let output = '';
  for (let i = 0; i < input.length; i++) {
    if (i !== 0) {
      output = output + ',';
    }
    output = output + input[i];
  }
  return output;
}

//Convert Object list to id list
export function getIdList(input) {
  const output = input.map(function (obj) {
    return obj.id;
  });
  return output;
}

//Convert Object list to JSON Object id List
export function getJSONIdList(data) {
    return data.map(({ id }) => ({ id }));
}

//Convert Object list to field list
export function getListByFieldName(input, name) {
  const output = input.map(function (obj) {
    return obj[name];
  });
  return output;
}

export function isStringEmptyAfterTrim(data){
    return (!data || data.trim().length === 0) ;
}

export function isFormEmpty(data){
    return (Object.values(data).every(value => !value)) ;
}

export function trimListDataBeforePost(dataList) {
    return dataList.map((dataObject) => {
        for (let key in dataObject) {
            if (typeof dataObject[key] === 'string') {
                dataObject[key] = dataObject[key].trim();
            }
        }
        return dataObject;
    });
}

export function trimDataBeforePost(dataObject){
    for (let key in dataObject) {
        if (typeof dataObject[key] === 'string') {
            dataObject[key] = dataObject[key].trim();
        }
    }
    return dataObject;
}

export function getObjectByValueName(list, valueName, value) {
    const obj = list.find((element) => {
        return element[valueName] === value;
    });
    return obj === undefined || Object.keys(obj).length <= 0 ? null : obj;
}


export function getObjectByName(list, name) {
  const obj = list.find((element) => {
    return element.name === name;
  });
  return obj === undefined || Object.keys(obj).length <= 0 ? null : obj;
}

export function getObjectById(list, id) {
  const obj = list.find((element) => {
    return element.id === id;
  });
  return obj === undefined || Object.keys(obj).length <= 0 ? null : obj;
}

export function removeObjectWithId(arr, id) {
  const arrCopy = Array.from(arr);
  const objWithIdIndex = arrCopy.findIndex((obj) => obj.id === id);
  arrCopy.splice(objWithIdIndex, 1);
  return arrCopy;
}

/**
 * Display the date array in string format, default format is 'yyyy-MM-dd'.
 *
 * @param {*} dateInput - The date value to be displayed, can be array or timestamp.
 * @param {*} [formatOption] - Set to True to display also the timestamp, or input custom format text.
 */
export function getDateString(dateInput, formatOption=false) {
  if (dateInput === null || dateInput === undefined) {
    return null;
  }

  let dateFormat = 'yyyy-MM-dd';
  if (formatOption==true) {
    dateFormat = 'yyyy-MM-dd HH:mm:ss';
  } else if (typeof(formatOption) == 'string') {
    dateFormat = formatOption;
  }

  let inputType = 0; // Array
  if (!Array.isArray(dateInput)) {
    inputType = 1;
  }

  let date = new Date();
  if (inputType == 0) {
    let queryDateArray = dateInput;
    date = new Date(
      queryDateArray[0],
      queryDateArray[1]-1,
      queryDateArray[2],
      queryDateArray[3] !== undefined ? queryDateArray[3] : 0,
      queryDateArray[4] !== undefined ? queryDateArray[4] : 0,
      queryDateArray[5] !== undefined ? queryDateArray[5] : 0
    );
  } else {
    date = new Date(dateInput);
  }
  return format(date, dateFormat);
}

export const isOptionEqualToValue = (option, value) => {
  return option.id === value?.id;
};

export const dateComparator = (date1, date2) => {
    const dateString1 =  getDateString(date1,false);
    const dateString2 =  getDateString(date2,false);
    const date1Obj = new Date(dateString1);
    const date2Obj = new Date(dateString2);
    if (date1Obj < date2Obj) {
        return -1;
    }
    if (date1Obj > date2Obj) {
        return 1;
    }
    return 0;
};

//====================COMMON NOTIFICATION====================//
export const notifySaveSuccess = () =>
  toast.success('Save success!', {
    position: 'bottom-left',
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: 'light'
  });

export const notifySendSuccess = () =>
    toast.success('Send success!', {
      position: 'bottom-left',
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: 'light'
    });

export const notifyLoadSuccess = () =>
  toast.success('Load success!', {
    position: 'bottom-left',
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: 'light'
  });

export const notifyDeleteSuccess = () =>
  toast.success('Delete Success!', {
    position: 'bottom-left',
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: 'light'
  });

export const notifyInfo = (infoString) =>
    toast.info(infoString, {
      position: 'bottom-left',
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: 'light'
    });

export const notifySuccess = (infoString) =>
    toast.success(infoString, {
      position: 'bottom-left',
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
      theme: 'light'
    });

export const notifyDeleteError = (errorString) =>
  toast.error(errorString, {
    position: 'bottom-left',
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: 'light'
  });

export const notifyNoPermission = () =>
  toast.error('You do not have permission to access this page', {
    position: 'bottom-left',
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    theme: 'light'
  });

//====================COMMON COMPONENT====================//
export function CustomNoRowsOverlay() {
  return (
    <GridOverlay>
      <Typography variant="body1">No record found</Typography>
    </GridOverlay>
  );
}

export function GeneralConfirmWindow({ isWindowOpen, title, content, onNormalClose, onConfirmClose }) {
  return (
    <Dialog
      open={isWindowOpen}
      onClose={onNormalClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      PaperProps={{
        sx: {
          maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
          maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
        }
      }}
    >
      <DialogTitle id="alert-dialog-title">
        <Typography variant="lionerBold" component="span" color={GENERAL_RED_COLOR}>
          {title}
        </Typography>
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          <Typography variant="lionerSize" component="span" color={GENERAL_TEXT_COLOR}>
            {content}
          </Typography>
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onNormalClose}>
          <Typography variant="lionerSize" component="span">
            Cancel
          </Typography>
        </Button>
        <Button onClick={onConfirmClose} autoFocus>
          <Typography variant="lionerSize" component="span">
            Confirm
          </Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export function GeneralComboWindow({ isWindowOpen, title, content, comboList, setValueCallback, onNormalClose, onConfirmClose }) {
  const [errors, setErrors] = useState({});
  const [temp, setTemp] = useState(null);

  function validate() {
    const formErrors = {};

    if (temp == null) {
      formErrors.error = 'Event must not be null';
    }

    setErrors(formErrors);
    if (Object.keys(formErrors).length === 0) {
      onConfirmClose();
    }
  }

  return (
    <Dialog
      PaperProps={{
        sx: {
          minWidth: '40vw',
          maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '50vw' },
          maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
        }
      }}
      open={isWindowOpen}
      onClose={onNormalClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <Grid item xs={11} s={11} md={11} lg={11} sx={{ mt: 3, ml: 3, mr: 3, mb: 3 }}>
          <InputLabel>
            {content}
            <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">
              *
            </Typography>
          </InputLabel>
          <Autocomplete
            id="confirm-combo"
            size="small"
            options={comboList}
            onChange={(event, newValue) => {
              setValueCallback(newValue);
              setTemp(newValue);
            }}
            renderInput={(params) => (
              <TextField
                {...params}
                //label={content}
                error={!!errors.error}
                helperText={errors.error}
                InputProps={{
                    ...params.InputProps,
                    style: {
                        height: 'auto',
                        overflow: 'hidden',
                        paddingTop: '8px', // Adjust as needed for vertical padding
                        paddingBottom: '8px', // Adjust as needed for vertical padding
                    },
                    classes: { input: 'autocomplete-input' },
                }}
                multiline
                maxRows={3}
              />
            )}
          />
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={onNormalClose}>Cancel</Button>
        <Button onClick={validate} autoFocus>
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export function GeneralTwoComboWindow({
  isWindowOpen,
  title,
  content,
  content2,
  comboList,
  comboList2,
  setValueCallback,
  setValueCallback2,
  onNormalClose,
  onConfirmClose
}) {
  const [errors, setErrors] = useState({});
  const [temp, setTemp] = useState(null);
  const [temp2, setTemp2] = useState(null);

  function validate() {
    const formErrors = {};
    if (temp === null) {
      formErrors.error = 'Event must not be null';
    }

    if (temp2 === null) {
      formErrors.error2 = 'Application must not be null';
    }

    setErrors(formErrors);
    if (Object.keys(formErrors).length === 0) {
      onConfirmClose();
    }
  }

    useEffect(() => {
        setValueCallback2(null);
        setTemp2(null);
    }, [temp]);

  return (
    <React.Fragment>
      <Dialog
        PaperProps={{
          sx: {
            minWidth: '40vw',
            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '50vw' },
            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
          }
        }}
        open={isWindowOpen}
        onClose={onNormalClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
        <DialogContent>
          <Grid item xs={11} s={11} md={11} lg={11} sx={{ mt: 3, ml: 3, mr: 3, mb: 3 }}>
            <InputLabel>
              {content}
              <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">
                *
              </Typography>
            </InputLabel>
            <Autocomplete
              id="confirm-combo"
              size="small"
              options={comboList}
              value={temp === null? null : temp}
              onChange={(event, newValue) => {
                setValueCallback(newValue);
                setTemp(newValue);
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  //label={content}
                  error={!!errors.error}
                  helperText={errors.error}
                  InputProps={{
                      ...params.InputProps,
                      style: {
                          height: 'auto',
                          overflow: 'hidden',
                          paddingTop: '8px', // Adjust as needed for vertical padding
                          paddingBottom: '8px', // Adjust as needed for vertical padding
                      },
                      classes: { input: 'autocomplete-input' },
                  }}
                  multiline
                  maxRows={3}
                />
              )}
            />
          </Grid>

          <Grid item xs={11} s={11} md={11} lg={11} sx={{ mt: 3, ml: 3, mr: 3, mb: 3 }}>
            <InputLabel>
              {content2}
              <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">
                *
              </Typography>
            </InputLabel>
            <Autocomplete
              id="application-combo"
              size="small"
              options={comboList2}
              onChange={(event, newValue) => {
                setValueCallback2(newValue);
                setTemp2(newValue);
              }}
              value={temp2 === null? null : temp2}
              disabled={temp === null}
              renderInput={(params) => (
                <TextField
                  {...params}
                  //label={content2}
                  error={!!errors.error2}
                  helperText={errors.error2}
                  InputProps={{
                      ...params.InputProps,
                      style: {
                          height: 'auto',
                          overflow: 'hidden',
                          paddingTop: '8px', // Adjust as needed for vertical padding
                          paddingBottom: '8px', // Adjust as needed for vertical padding
                      },
                      classes: { input: 'autocomplete-input' },
                  }}
                  multiline
                  maxRows={3}
                />
              )}
            />
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={onNormalClose}>Cancel</Button>
          <Button onClick={validate} autoFocus>
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}

export function GeneralCreateTemplateWindow({
  isWindowOpen,
  title,
  content,
  setValueCallback,
  validatePath,
  onNormalClose,
  onConfirmClose,
  module
}) {
  const [errors, setErrors] = useState({});
  const [temp, setTemp] = useState(null);

  function validateTemplateName() {
      const userData = getUserData();

      axios
      .get(`${apiPath}${validatePath}`, {
        params: {
          name: temp.trim(),
          userId: userData.id,
          module: module
        }
      })
      .then((response) => {
        if (response.status === 200) {
          const formErrors = {};
          if (response.data.isTaken) {
            formErrors.error = 'Name have been taken';
            setErrors(formErrors);
          } else if (!response.data.isTaken) {
            if (Object.keys(formErrors).length === 0) {
              onConfirmClose();
            }
          }
        }
      })
      .catch((error) => {
        console.log(error);
        return true;
      });
  }

  function validate() {
    const formErrors = {};
    if (temp === null) {
      formErrors.error = 'Template name must not be null';
    }
    else if (temp.trim().length === 0){
        formErrors.error = 'Template name must not be null';
    }

    setErrors(formErrors);
    if (Object.keys(formErrors).length === 0) {
      validateTemplateName();
    }
  }

  const onInputChange = (event) => {
    setTemp(event.target.value);
    setValueCallback(event.target.value);
  };

  return (
    <Dialog
      PaperProps={{
        sx: {
          minWidth: '25vw',
          maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '50vw' },
          maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
        }
      }}
      open={isWindowOpen}
      onClose={onNormalClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <Grid item xs={9} s={9} md={9} lg={9} sx={{ mt: 3, ml: 3, mr: 3, mb: 3 }}>
          <InputLabel>
            {content}
            <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">
              *
            </Typography>
          </InputLabel>
          <TextField fullWidth onChange={onInputChange} id="templateName" size="small" error={!!errors.error} helperText={errors.error} />
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={onNormalClose}>Cancel</Button>
        <Button onClick={validate} autoFocus>
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export function UploadFileWindow({ isWindowOpen, title, video, onNormalClose, onConfirmClose }) {
  const [errors, setErrors] = useState({});
  const [file, setFile] = React.useState(null)
  const fileInputRef = useRef(null);

  const { register, getValues, setValue } = useForm();

  useEffect(() => {
    setValue('remarks', video.remarks);
  }, [video]);

  const handleOnClose = () => {
    setFile(null);
    onNormalClose();
  };

  const handleFieldChange = (newFile) => {
    setFile(newFile);
  };

  const handleChange = (event) => {
      if(event !== null){
          const newFile = event.target.files[0];
          setFile(newFile);
      }
      else{
          setFile(null)
      }
  };

  const handleOpenFileSelect = () => {
      fileInputRef.current.click();
  };

  function validate() {
    const formErrors = {};
    /*if (file == null) {
            formErrors.error = 'File must not be null';
    }*/

    if (file !== null) {
      if (file.type.split('/')[0] !== 'image') {
        formErrors.error = 'File must be a image';
      }
    }

    setErrors(formErrors);
    if (Object.keys(formErrors).length === 0) {
      uploadData();
    }
  }

  function uploadData() {
    const values = getValues();
    let formData = new FormData();
    let containData = false;
    formData.append('fileId', video.id);

    if (file !== null) {
      formData.append('file', file);
      containData = true;
    }
    if (values.remarks) {
      formData.append('remarks', values.remarks);
      containData = true;
    }

    if (containData) {
      axios
        .post(`${apiPath}${POST_THUMBNAIL_PATH}`, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then((response) => {
          if (response.status === 200) {
            notifySaveSuccess();
            setFile(null);
            onConfirmClose();
          }
        })
        .catch((error) => {
          console.log(error);
          return false;
        });
    }
  }
  return (
    <Dialog
      PaperProps={{
        sx: {
          minWidth: '50vw',
          width: { xs: '90vw', s: '90vw', m: '70vw', lg: '50vw' },
          maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '70vh' }
        }
      }}
      open={isWindowOpen}
      onClose={onNormalClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">
        <Typography variant="lionerBold" component="span">
          {title}
        </Typography>
      </DialogTitle>
      <DialogContent>
        <Grid container>
          <Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 1 }}>
            <Grid container alignItems={'center'}>
              <Grid item xs={4} s={4} md={4} lg={4} sx={{ ml: 1, mr: 3, display: 'flex', alignItems: 'center' }}>
                <Typography variant="lionerLabel" component="span">
                  File Name:
                </Typography>
              </Grid>

              <Grid item xs={7} s={7} md={7} lg={7}>
                <FormControl fullWidth required>
                  <Typography variant="lionerLabel" component="span">
                    {video.key}
                  </Typography>
                </FormControl>
              </Grid>
            </Grid>

            {video.mimetype === 'video' ? (
              <Grid container alignItems={'center'} sx={{ mt: 3 }}>
                <Grid item xs={4} s={4} md={4} lg={4} sx={{ ml: 1, mr: 3, display: 'flex', alignItems: 'center' }}>
                  <Typography variant="lionerLabel" component="span">
                    Thumbnail:
                  </Typography>
                </Grid>
                <Grid item xs={7} s={7} md={7} lg={7}>
                  <FormControl fullWidth required>
                      <Grid container alignItems={'flex-start'} sx={{ mt: 3 }}>
                          <Grid item xs={7} s={7} md={7} lg={8} sx={{display: 'flex', alignItems: 'flex-start' }}>

                              <MuiFileInput
                                  inputProps={{
                                      accept: '.png, .jpeg, .jpg',
                                  }}
                                  InputProps={{
                                      padding: '7.5px 8px 7.5px 12px',
                                      startAdornment: null, // Set startAdornment to null to disable it
                                  }}
                                  value={file}
                                  onChange={handleFieldChange}
                                  error={!!errors.error}
                                  helperText={errors.error}
                                  disabled={video.mimetype !== 'video'}
                              />
                          </Grid>
                          <Grid item xs={4} s={4} md={4} lg={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                              <div>
                                  <input
                                      type="file"
                                      accept=".png, .jpeg, .jpg"
                                      style={{ display: 'none' }}
                                      ref={fileInputRef}
                                      onChange={handleChange}
                                  />
                                  <Button
                                      component="label"
                                      variant="contained"
                                      startIcon={<CloudUploadIcon />}
                                      inputprops={{
                                          accept: '.png, .jpeg, .jpg',
                                          startAdornment: <AttachFileIcon />
                                      }}
                                      onClick={handleOpenFileSelect}
                                  >
                                      Upload file
                                  </Button>
                                  {/*Selected file: {file ? file.name : 'None'}*/}
                              </div>
                          </Grid>
                      </Grid>
                  </FormControl>
                </Grid>
              </Grid>
            ) : (
              <Grid />
            )}

            <Grid container alignItems={'flex-start'} sx={{ mt: 3 }}>
              <Grid item xs={4} s={4} md={4} lg={4} sx={{ ml: 1, mr: 3, display: 'flex', alignItems: 'flex-start' }}>
                <Typography variant="lionerLabel" component="span">
                  Remark:
                </Typography>
              </Grid>
              <Grid item xs={7} s={7} md={7} lg={7}>
                <TextField
                  fullWidth
                  inputProps={{maxLength: 255, style: {fontSize: '1.1rem'}}}
                  {...register('remarks', {
                    value: video.remarks
                  })}
                  id="remarks"
                  InputProps={{
                      style: { minHeight:'42.5px', maxHeight: '50vh' },
                  }}
                  multiline
                  rows={3}
                />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleOnClose}>
          <Typography variant="lionerLabel" component="span">
            Cancel
          </Typography>
        </Button>
        <Button onClick={validate} autoFocus>
          <Typography variant="lionerLabel" component="span">
            Confirm
          </Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
}