Bulk List 
**************************************************


import AppAnimate from "@crema/core/AppAnimate";
import moment from "moment";

import AppCard from "@crema/core/AppCard";
import AppGridContainer from "@crema/core/AppGridContainer";
import { useAuthUser } from "@crema/utility/AuthHooks";
import IntlMessages from "@crema/utility/IntlMessages";
import CloseIcon from "@mui/icons-material/Close";
import {
  AddLocation,
  PermContactCalendar,
  PersonOutlineOutlined,
  ExitToApp,
} from "@mui/icons-material";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import FmdGoodOutlinedIcon from "@mui/icons-material/FmdGoodOutlined";
import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
import BorderColorOutlinedIcon from "@mui/icons-material/BorderColorOutlined";
import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
import CropPortraitIcon from "@mui/icons-material/CropPortrait";
import AddIcon from "@mui/icons-material/Add";
import { ICretehealthSafetyVisit, ICretehealthSafetyVisitBulk } from "types/models/HealthSafety";
import { LayoutDirection } from "shared/constants/AppEnums";
import LoadingButton from "@mui/lab/LoadingButton";

import { CheckCircleOutline } from "@mui/icons-material";


import {
  CachedOutlined,
  DoneOutlined,
  Info,
  InfoOutlined,
  KeyboardArrowDown,
  KeyboardArrowUp,
} from "@mui/icons-material";
import {
  Alert,
  Box,
  Button,
  Collapse,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  Grow,
  Icon,
  IconButton,
  Paper,
  Slide,
  Step,
  StepLabel,
  Stepper,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  Zoom,
  useTheme,
} from "@mui/material";
import { TransitionProps } from "@mui/material/transitions";
import { AppCustomWrapper, StyledDivider } from "components/AppGridCustom";
import AttachmentList from "components/Attachment";
import AvatarApp from "components/AvatarApp";
import { NoData } from "components/CustomNoRowsOverlay";
import { CustomPaginationBasic, DataTableApp } from "components/DataTableApp";
import { ColorLibStepIconRoot } from "components/StatsCard";
import { CurrencyFormatFn } from "helper/arrayFn";
import { StatusDynamic } from "pages/tasks/TasksList/Status";
import { forwardRef, useCallback, useEffect, useState } from "react";
import { BiTransfer } from "react-icons/bi";
import { useIntl } from "react-intl";
import { useDispatch } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { GetVisitTypes, getAllVisits, onPushHealthSafetyBulkVisits } from "redux/actions/healthSafety";
import { Fonts } from "shared/constants/AppEnums";
import { RoutesConst } from "shared/constants/RoutesConst";
import { DataPaging } from "types/models/Common";
import { withStyles } from "@mui/styles";
import { Formik } from "formik";
import AddHeathSafetyVisitBulkForm from "./AddVisitFormBulk";
import { useThemeContext } from "@crema/utility/AppContextProvider/ThemeContextProvider";

import {  useSelector } from "react-redux";
import { AppState } from "redux/store";
import { MailInfoWrapper, MailItemWrapper } from "../visitLists/visitsLists.styles";
import clsx from "clsx";
import VisitListsHeader from "../visitLists/visitListHeader";
import ReturnToHome from "../commons/returnToHomeBtn";
import { useContext } from "react";
import { ContextProvider } from './contextProvider';
import { ContextSharePoint } from "./contextProvider";



//export const userContext = createContext({});




const VisitListsBulk = () => {

  const initValue: ICretehealthSafetyVisitBulk = {
    locationName:undefined,
    organizationId: "",
    organizationDes:"",
    locationDes:"",
    visitTypeId: "VmlzaXRUeXBlLTI=",
    remarks: "",
    planId: 1,
    visitDate:  moment().toDate(),
    fromTime:  null,
    toTime: null,
    mainCoordinatorName:'',
    alternativeCoordinatorName:'',
    mainCoordinators: [],
    alternativeCoordinators: [],
    visitNote:"",
  };
  const dispatch = useDispatch();
  const { messages } = useIntl();
  const { user } = useAuthUser();
  const navigator = useNavigate();
  const { palette } = useTheme();
  const [open, setOpen] = useState<number>();
    const [openD, setOpenD] = useState<boolean>(true);

  const [page, setPage] = useState<number>(1);
  const [data, setData] = useState<DataPaging<any>>();
  const { theme } = useThemeContext();

  const { loading } = useSelector<AppState, AppState["common"]>(
    ({ common }) => common
  );
  const [addedVisits, setAddedVisits] = useState<ICretehealthSafetyVisitBulk[]>([]);
  const { openAddForm, setOpenAddForm } = useContext(ContextSharePoint);
 
  const openDialoghelper = ()=>{
    console.log("------------openAddForm= "+ openAddForm );
   // debugger;

    setTimeout(() => {
      console.log("Delayed for 1 second.");
      setOpenAddForm(true);

    }, 3000);
       // setOpenAddForm(true);
    }



  const [modalAction, setModalAction] = useState<{
    data: any;
    open: boolean;
  }>();

  const obj = {hasStatus: true, title: (messages["visit.dashboard"] as string)};
  const redirectToHome = useCallback(() => {
    navigator(RoutesConst.healthSafetyVisitListsManage);
  }, [navigator]);
  const redirectToSame = useCallback(() => {
    navigator(RoutesConst.healthSafetyVisitListsBulk);
  }, [navigator]);

  const Mew = withStyles({
    root: {
      borderBottom: "none",
    },
  })(TableCell);

  let { idVisit } = useParams();
  const navigate = useNavigate();
  const openEditForm = useCallback(
    (id: string) => {
      idVisit = id;
      let path = RoutesConst.editHealthSafetyVisit + "/";
      if (idVisit && idVisit.length > 0) path = path + idVisit;
      navigate(path);
    },
    [navigate]
  );

  const [visitTypes, setVisitTyps] = useState<any[]>();
  const getVisitTypes = useCallback(() => {
    GetVisitTypes(dispatch).then((res) => {
      setVisitTyps(res);
    });
  }, [visitTypes]);
  useEffect(() => {
    if (!visitTypes) getVisitTypes();
  }, [dispatch, setVisitTyps, visitTypes]);


 
  return (

    <>
   <ContextProvider>
    <Formik
      // enableReinitialize
      validateOnChange={true}
      initialValues={initValue}
      //children = {setOpenD}
      //validationSchema={validationSchema}
      onSubmit={async (
        data,
        {
          setSubmitting, resetForm, setFieldError, setFieldTouched, validateField,
        }
      ) => {
        setSubmitting(true);
        setAddedVisits((state) => [...state ?? [], data]);
        setOpenAddForm(true);
        setSubmitting(false);

      } }
    >
      
      {({ isSubmitting, values, setFieldValue, ...rest }) => (
        <>
          {!rest.isValid && rest.errors && (
            <Alert severity="error" sx={{ mt: 4, mb: 6 }}>
              <IntlMessages id="validation.required" />
            </Alert>
          )}
          <AddHeathSafetyVisitBulkForm
            isSubmitting={isSubmitting}
            values={values}
            openDialog={openAddForm}
            setFieldValue={setFieldValue}
            {...rest} />


        </>

      )}



    </Formik>
    <AppAnimate>
          <AppCustomWrapper>
            <AppGridContainer>
              <Grow in timeout={5 * 20 + 400}>
                <Grid item xs={12}>
                  <AppCard
                    title={<Typography>
                      <Typography variant="h2">
                        <ReturnToHome
                          url={RoutesConst.healthSafetyVisitListsApproved}
                        ></ReturnToHome>


                        <IconButton
                          onClick={openDialoghelper}
                          style={{ backgroundColor: "transparent" }}
                          sx={{
                            //position: "absolute",
                            left: 980,
                            //color: "grey.500",
                          }}
                        >
                          <AddIcon></AddIcon>
                          <IntlMessages id="visit.add" />
                        </IconButton>
                      </Typography>
                    </Typography>}
                    contentStyle={{
                      minHeight: 850,
                      display: "flex",
                      flexDirection: "column",
                    }}
                  >
                    <VisitListsHeader
                      {...obj}
                    >
                    </VisitListsHeader>
                    {addedVisits?.length > 0 ? (
                      addedVisits?.map((item, i) => (
                        <>
                          <MailItemWrapper
                            key={i}
                            className={clsx("item-hover", {
                              active: { i },
                            })}
                            //sx={{}}
                            onClick={undefined}
                          >
                            <Box
                              sx={{
                                display: "flex",
                                alignItems: "center",
                                width: { xs: "100%", sm: "auto" },
                                height: { xs: "50%", sm: "auto" },
                              }}
                            >
                              <Box
                                component="span"
                                sx={{
                                  display: "inline-block",
                                }}
                                onClick={(event: any) => event.stopPropagation()}
                              >
                              </Box>
                              <Box
                                sx={{
                                  mr: 2.5,
                                  display: { xs: "none", sm: "inline-block" },
                                  "& .MuiCheckbox-root": {
                                    color: (theme) => theme.palette.warning.main,
                                  },
                                }}
                                component="span"
                                onClick={(event: any) => event.stopPropagation()}
                              ></Box>

                              <Box
                                sx={{
                                  mr: 3.5,
                                }}
                              ></Box>
                            </Box>

                            <MailInfoWrapper>
                              <Box
                                className="mail-info-content"
                                sx={{
                                  display: "flex",
                                  flexDirection: "row",
                                  alignItems: "center",
                                  width: "calc(100% - 120px)",
                                  transition: "all 0.4s ease",
                                }}
                              >
                                <Box>
                                  {theme.direction === LayoutDirection.RTL ? (
                                    <>
                                      <Typography
                                        width="590px"
                                        pl={1}
                                        variant="h4"
                                        style={{
                                          fontWeight: Fonts.BOLD,
                                          borderRight: "5px solid " +
                                            visitTypes?.find(
                                              ({ id }) => id == item.visitTypeId
                                            ).colorCode,
                                        }}
                                      >
                                        {item.organizationDes}
                                      </Typography>
                                    </>
                                  ) : (
                                    <>
                                      <Typography
                                        width="590px"
                                        pl={1}
                                        variant="h4"
                                        style={{
                                          fontWeight: Fonts.BOLD,
                                          borderLeft: "5px solid " +
                                            visitTypes?.find(
                                              ({ id }) => id == item.visitTypeId
                                            ).colorCode,
                                        }}
                                      >
                                        {item.organizationDes}
                                      </Typography>
                                    </>
                                  )}
                                </Box>

                                <Box
                                  width="490px"
                                  //component="p"
                                  sx={{
                                    overflow: "hidden",
                                    textOverflow: "ellipsis",
                                    // whiteSpace: "nowrap",
                                    color: "text.secondary",
                                  }}
                                >
                                  <Typography variant="inherit">
                                    {visitTypes?.find(
                                      ({ id }) => id == item.visitTypeId
                                    ).name}
                                  </Typography>
                                </Box>
                                <Box
                                  width="490px"
                                  //component="p"
                                  sx={{
                                    overflow: "hidden",
                                    textOverflow: "ellipsis",
                                    // whiteSpace: "nowrap",
                                    color: "text.secondary",
                                  }}
                                >
                                  <Typography variant="inherit">
                                    {new Date(item.visitDate).toLocaleString(
                                      "en-us",
                                      {
                                        day: "2-digit",
                                        month: "long",
                                        year: "numeric",
                                      }
                                    )}
                                  </Typography>
                                </Box>
                                <Box
                                  width="490px"
                                  //component="p"
                                  sx={{
                                    overflow: "hidden",
                                    textOverflow: "ellipsis",
                                    // whiteSpace: "nowrap",
                                    color: "text.secondary",
                                  }}
                                >
                                  <Typography variant="inherit">
                                    {""}
                                  </Typography>
                                </Box>
                                <Box width="470px">
                                  <Grid container justifyContent={"center"} spacing={1}>
                                    <Grid item xs={3} sx={{ mr: 3 }}
                                      alignContent="center"
                                      alignItems="center">
                                      <AvatarApp
                                        name={item?.mainCoordinatorName[0]} />
                                    </Grid>
                                    <Grid item xs={3} sx={{ mr: 9 }}
                                      alignContent="center"
                                      alignItems="center">
                                      <AvatarApp
                                        name={item?.alternativeCoordinatorName[0]} />
                                    </Grid>
                                  </Grid>
                                </Box>
                              </Box>

                              <Box
                                className="mail-time"
                                component="span"
                                sx={{
                                  px: 2.5,
                                  minWidth: 110,
                                  marginLeft: "auto",
                                  display: "flex",
                                  justifyContent: "flex-end",
                                  alignItems: "center",
                                  transition: "all 0.3s ease",
                                }}
                              ></Box>

                              {/* <MainActionWrapper className="main-action-wrapper">
                  <Tooltip
                    title={<IntlMessages id="visit.approve" />}
                    arrow
                  >
                    <IconButton
                      sx={{
                        color: (theme) => theme.palette.text.disabled,
                      }}
                      onClick={() => {
                        const approveValues: IProcesshealthSafetyVisit =
                          {
                            remarks: "",
                            id: item.id,
                            actionId: VisitsStatus.Approved,
                          };
                        onProcerssHealthSafetyVisit(
                          { ...approveValues },
                          dispatch
                        );
                        setLastActionMade();
                        navigate(
                          RoutesConst.healthSafetyVisitListsManage
                        );
                        setLastActionMade();
                      }}
                      size="large"
                    >
                      <CheckIcon />
                    </IconButton>
                  </Tooltip>
                  <Tooltip
                    title={<IntlMessages id="visit.return" />}
                    arrow
                  >
                    <IconButton
                      sx={{
                        color: (theme) => theme.palette.text.disabled,
                      }}
                      onClick={() => {
                        setModalAction({
                          open: true,
                          data: item,
                          actionId: VisitsStatus.Returned,
                        });
                      }}
                      size="large"
                    >
                      <KeyboardReturnIcon />
                    </IconButton>
                  </Tooltip>
                  <Tooltip
                    title={<IntlMessages id="visit.cancel" />}
                    arrow
                  >
                    <IconButton
                      sx={{
                        color: (theme) => theme.palette.text.disabled,
                      }}
                      onClick={() => {
                        const canceledValues: IProcesshealthSafetyVisit =
                          {
                            remarks: "",
                            id: item.id,
                            actionId: VisitsStatus.Canceled,
                          };
                        onProcerssHealthSafetyVisit(
                          { ...canceledValues },
                          dispatch
                        );
                        setLastActionMade();
                        navigate(
                          RoutesConst.healthSafetyVisitListsManage
                        );
                        setLastActionMade();
                      }}
                      size="large"
                    >
                      <ClearIcon />
                    </IconButton>
                  </Tooltip>
                </MainActionWrapper> */}
                            </MailInfoWrapper>
                          </MailItemWrapper>
                        </>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={6}>
                          <NoData />
                        </TableCell>
                      </TableRow>
                    )}

                    {data?.data?.length > 0 && (
                      <CustomPaginationBasic
                        onChange={(_, val) => {
                          setPage(val);
                        } }
                        page={data?.pageNumber}
                        count={data?.totalPages} />
                    )}
                    <br></br>
                    <div>
                      <LoadingButton
                        sx={{
                          ml: 15,
                          position: "relative",
                          // minWidth: 120,
                        }}
                        loading={loading}
                        color="primary"
                        variant="outlined"
                        disabled={false}
                        type="button"
                        onClick={() => {
                          onPushHealthSafetyBulkVisits(
                            addedVisits,
                            dispatch
                          );
                          navigate(RoutesConst.healthSafetyVisitListsManage);
                        } }
                        endIcon={<CheckCircleOutline />}
                        loadingPosition="center"
                      >
                        <IntlMessages id="common.save" />
                      </LoadingButton>

                      <LoadingButton
                        sx={{
                          ml: 3,
                          position: "relative",
                          // minWidth: 120,
                        }}
                        loading={loading}
                        color="inherit"
                        variant="outlined"
                        disabled={false}
                        type="button"
                        onClick={redirectToHome}
                        endIcon={<CheckCircleOutline />}
                        loadingPosition="center"
                      >
                        <IntlMessages id="common.cancel" />
                      </LoadingButton>
                    </div>
                  </AppCard>
                </Grid>
              </Grow>
            </AppGridContainer>

            <Dialog
              open={modalAction?.open}
              //  TransitionComponent={Transition}
              keepMounted
              onClose={undefined}
              fullWidth
              maxWidth="md"
            >
              <DialogTitle>
                <Typography
                  variant="h3"
                  color={"balack"}
                  // variant="h5"
                  style={{ fontWeight: Fonts.BOLD }}
                  sx={{ mr: 3, mt: 2 }}
                  gutterBottom
                  alignContent="center"
                  alignItems="center"
                >
                  {/* {"Actions line"}
    <ContentCopyOutlinedIcon></ContentCopyOutlinedIcon>
<BorderColorOutlinedIcon></BorderColorOutlinedIcon>
<DeleteOutlinedIcon></DeleteOutlinedIcon> */}
                  <IconButton
                    aria-label="delete"
                    sx={{
                      position: "absolute",
                      left: 80,
                      top: 4,
                      color: "grey.500",
                    }}
                    onClick={() => setModalAction(undefined)}
                    size="large"
                  >
                    <ContentCopyOutlinedIcon />
                  </IconButton>

                  <IconButton
                    aria-label="delete"
                    sx={{
                      position: "absolute",
                      left: 42,
                      top: 4,
                      color: "grey.500",
                    }}
                    onClick={undefined
                      //  () => openEditForm(modalAction.data.id)
                    }
                    size="large"
                  >
                    <BorderColorOutlinedIcon />
                  </IconButton>

                  <IconButton
                    aria-label="delete"
                    sx={{
                      position: "absolute",
                      left: 3,
                      top: 4,
                      color: "grey.500",
                    }}
                    onClick={() => setModalAction(undefined)}
                    size="large"
                  >
                    <DeleteOutlinedIcon />
                  </IconButton>

                  <IconButton
                    aria-label="close"
                    sx={{
                      position: "absolute",
                      right: 4,
                      top: 4,
                      color: "grey.500",
                    }}
                    onClick={() => setModalAction(undefined)}
                    size="large"
                  >
                    <CloseIcon />
                  </IconButton>
                </Typography>

                <Box>

                </Box>
              </DialogTitle>
              <DialogContent dividers>
                <Box sx={{ py: 2 }}>
                  <Typography
                    color={"balack"}
                    variant="h5"
                    style={{ fontWeight: Fonts.BOLD }}
                    sx={{ mr: 2 }}
                    gutterBottom
                    alignContent="center"
                    alignItems="center"
                  >
                    {modalAction?.data?.visitTypeDes}
                  </Typography>
                </Box>

                <Box display="flex" sx={{ py: 2 }}>
                  <Typography
                    color={"balack"}
                    variant="h2"
                    style={{ fontWeight: Fonts.BOLD }}
                    sx={{ mr: 2 }}
                    alignContent="center"
                    alignItems="center"
                  >
                    {modalAction?.data?.organizationDes} {", "}
                    {modalAction?.data?.locationDes}
                  </Typography>
                </Box>

                <Box display="flex" sx={{ py: 2 }}>
                  <Typography
                    color={palette.primary.dark}
                    sx={{ mr: 2 }}
                    alignContent="center"
                    alignItems="left"
                  >
                    <FmdGoodOutlinedIcon
                      sx={{ mr: -1, mt: -1.5 }}
                    ></FmdGoodOutlinedIcon>
                  </Typography>
                  <Typography
                    color={palette.primary.dark}
                    variant="h5"
                    style={{ fontWeight: Fonts.BOLD }}
                    alignContent="center"
                    alignItems="center"
                  >
                    {modalAction?.data?.locationDes}
                  </Typography>
                </Box>

                <Box display="flex" sx={{ py: 2 }}>
                  <Typography
                    color={palette.primary.dark}
                    sx={{ mr: 2 }}
                    alignContent="center"
                    alignItems="left"
                  >
                    <CalendarTodayOutlinedIcon
                      sx={{ mr: -1, mt: -1.5 }}
                    ></CalendarTodayOutlinedIcon>
                  </Typography>
                  <Typography
                    color={palette.primary.dark}
                    variant="h5"
                    style={{ fontWeight: Fonts.BOLD }}
                    alignContent="center"
                    alignItems="center"
                  >
                    {new Date(modalAction?.data?.visitDate).toLocaleString(
                      "en-us",
                      { day: "2-digit", month: "long", year: "numeric" }
                    )}
                  </Typography>
                </Box>

                <Box display="flex" sx={{ py: 1 }}>
                  <Typography
                    color={palette.primary.dark}
                    variant="h5"
                    style={{ fontWeight: Fonts.BOLD }}
                    sx={{ mr: 1 }}
                    alignContent="center"
                    alignItems="center"
                  >
                    <IntlMessages id="visit.mainCoordinator" />
                  </Typography>
                </Box>
                <Box display="flex" sx={{ py: 2 }}>
                  <Typography
                    //color={palette.primary.dark}  
                    //variant="h5"
                    //style={{ fontWeight: Fonts.BOLD }}
                    sx={{ mr: 2 }}
                    alignContent="center"
                    alignItems="left"
                  >
                    <PersonOutlineOutlined
                      sx={{ mr: 2, mt: -1 }}
                    ></PersonOutlineOutlined>
                  </Typography>
                  <Typography>
                    {modalAction?.data?.mainCoordinatorName[0]}
                  </Typography>
                </Box>

                <Box display="flex" sx={{ py: 1 }}>
                  <Typography
                    color={palette.primary.dark}
                    variant="h5"
                    style={{ fontWeight: Fonts.BOLD }}
                    sx={{ mr: 1 }}
                    alignContent="center"
                    alignItems="center"
                  >
                    <IntlMessages id="visit.alternativeCoordinator" />
                  </Typography>
                </Box>
                <Box display="flex" sx={{ py: 2 }}>
                  <Typography
                    //color={palette.primary.dark}
                    //variant="h5"
                    //style={{ fontWeight: Fonts.BOLD }}
                    sx={{ mr: 2 }}
                    alignContent="center"
                    alignItems="left"
                  >
                    <PersonOutlineOutlined
                      sx={{ mr: 2, mt: -1 }}
                    ></PersonOutlineOutlined>
                  </Typography>
                  <Typography>
                    {modalAction?.data?.alternativeCoordinatorName[0]}
                  </Typography>
                </Box>


              </DialogContent>
            </Dialog>

          </AppCustomWrapper>
    </AppAnimate>
    </ContextProvider>
      </>
  );
};

export default VisitListsBulk;







/*************************************************
Bulk Form



import AppTextField from "@crema/core/AppFormComponents/AppTextField";
import AppGridContainer from "@crema/core/AppGridContainer";
import IntlMessages from "@crema/utility/IntlMessages";
import { CheckCircleOutline } from "@mui/icons-material";
import LoadingButton from "@mui/lab/LoadingButton";
import Box from "@mui/material/Box";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import CloseIcon from "@mui/icons-material/Close";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import { NoData } from "components/CustomNoRowsOverlay";

import Select from "@mui/material/Select";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { StyledDivider } from "components/AppGridCustom";
import {
  InputCoordinatorSelectSingle,
  InputEmployeeSelect,
  InputOrganizationSelect,
  InputOrganizationSelectSingle,
} from "components/InputApp";
import { Form } from "formik";
import { preventOnKeyDown } from "helper/arrayFn";
import moment from "moment";
import React, { ReactNode, useCallback, useEffect, useState } from "react";
import { BsFlagFill } from "react-icons/bs";
import { useIntl } from "react-intl";
import { useDispatch, useSelector } from "react-redux";
import {
  getEmployeeIncludeDispatch,
  getCoordinatorIncludeDispatch,
  getOrganizationWithoutDispatch,
  onGetPriorityList,
  GetVisitTypes,
  GetVisitById,
} from "redux/actions";
import { AppState } from "redux/store";
import { Fonts } from "shared/constants/AppEnums";
import { DataPaging } from "types/models/Common";
import { ICretehealthSafetyVisit, ICretehealthSafetyVisitBulk, getLocal } from "types/models/HealthSafety";
import { organizationTypes } from "types/models/Tasks";
import { BiCalendar } from "react-icons/bi";
import {
  Breakpoint,
  Dialog,
  DialogContent,
  DialogTitle,
  IconButton,
  Radio,
  RadioGroup,
  SxProps,
  Theme,
  Slide,
  Typography,
  useTheme,
  Input,
} from "@mui/material";
import { TimePicker } from "@mui/lab";

import { TransitionProps } from "@mui/material/transitions";
import { useNavigate } from "react-router-dom";
import { RoutesConst } from "shared/constants/RoutesConst";
import { string } from "prop-types";
import { useContext } from "react";
import { ContextProvider } from './contextProvider';
import { ContextSharePoint } from "./contextProvider";

interface ISelectedVisit {
  id: string;
  name: string;
  colorCode: string;
  note: string;
  dayDuration: number;
  hasTime: boolean;
}
interface AddHeathSafetyVisitFormProps {
  values: ICretehealthSafetyVisitBulk;
  setFieldValue: (name: string, value: any) => void;
  isSubmitting: boolean;
   getFieldMeta: any;
  errors: any;
  isValid: boolean;
  openDialog: boolean;
}

const AddHeathSafetyVisitBulkForm: React.FC<AddHeathSafetyVisitFormProps> = ({
  values,
  setFieldValue,
  isSubmitting,
  // getFieldMeta,
  errors,
  isValid,
  ...rest
}) => {
  const dispatch = useDispatch();
  const { messages, locale } = useIntl();

  const { loading } = useSelector<AppState, AppState["common"]>(
    ({ common }) => common
  );

  const [modalAction, setModalAction] = useState<{
    data: any;
    open: boolean;
  }>();
  function disableWeekends(date) {
    return date.getDay() === 0 || date.getDay() === 6;
  }

  const handleVisitTypeChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setSelectedVisitTypeValue(event.target.value);
    setFieldValue("visitTypeId", event.target.value);
    //setFieldValue("visitTypeId", event.target.value);
  };

  const navigator = useNavigate();
  const redirectToVisits = useCallback(() => {
    navigator(RoutesConst.healthSafetyVisitListsManage);
  }, [navigator]);
  const { palette } = useTheme();

  const [visitTypes, setVisitTyps] = useState<any[]>();
  const getVisitTypes = useCallback(() => {
    GetVisitTypes(dispatch).then((res) => {
      setVisitTyps(res);
    });
  }, [visitTypes]);
  useEffect(() => {
    if (!visitTypes) getVisitTypes();
  }, [dispatch, setVisitTyps, visitTypes]);

    const [selectedVisitTypeValue, setSelectedVisitTypeValue] =
    React.useState("");
    const [selectedNote, setSelectedNote] =
    React.useState(messages["visit.typeFirstNote"] as string);
  
   const ChangeTheNote =( note: string)=> {
    setSelectedNote(note);
      document.getElementById('NoteText').innerHTML
          = note;
  };

  const { openAddForm, setOpenAddForm } = useContext(ContextSharePoint);

  return (
    <ContextProvider>
    <Dialog
    //open={openDialogFlag??rest.openDialog}
    open={rest.openDialog}
      keepMounted
      onClose={()=>{setOpenAddForm(false)}}
      fullWidth
      maxWidth="md"
    >
      <DialogTitle>
        <Typography
          variant="h3"
          color={"balack"}
          // variant="h5"
          style={{ fontWeight: Fonts.BOLD }}
          sx={{ mr: 3, mt: 2 }}
          gutterBottom
          alignContent="center"
          alignItems="center"
        >
          {/* {"Actions line"} */}
          {/* <ContentCopyOutlinedIcon></ContentCopyOutlinedIcon>
<BorderColorOutlinedIcon></BorderColorOutlinedIcon>
<DeleteOutlinedIcon></DeleteOutlinedIcon> */}
          <IconButton
            aria-label="delete"
            sx={{
              position: "absolute",
              left: 80,
              top: 4,
              color: "grey.500",
            }}
            onClick={() => setModalAction(undefined)}
            size="large"
          >
            {/* <ContentCopyOutlinedIcon /> */}
          </IconButton>

          <IconButton
            aria-label="delete"
            sx={{
              position: "absolute",
              left: 42,
              top: 4,
              color: "grey.500",
            }}
            onClick={() => setModalAction(undefined)}
            size="large"
          >
            {/* <BorderColorOutlinedIcon /> */}
          </IconButton>

          <IconButton
            aria-label="delete"
            sx={{
              position: "absolute",
              left: 3,
              top: 4,
              color: "grey.500",
            }}
            onClick={() => setModalAction(undefined)}
            size="large"
          >
            {/* <DeleteOutlinedIcon /> */}
          </IconButton>

          <IconButton
            aria-label="close"
            sx={{
              position: "absolute",
              right: 4,
              top: 4,
              color: "grey.500",
            }}
            onClick={()=>setOpenAddForm(false)}
            size="large"
          >
            <CloseIcon />
          </IconButton>
        </Typography>
      </DialogTitle>
      <DialogContent dividers>
        <Form
          style={{
            width: "100%",
          }}
          noValidate
          autoComplete="off"
        >
          <div>
            <Box sx={{ py: 2 }}>
              <Typography
                color={"balack"}
                variant="h2"
                style={{ fontWeight: Fonts.BOLD }}
                sx={{ mr: 2 }}
                gutterBottom
                alignContent="center"
                alignItems="center"
              >
                {<IntlMessages id="visit.addVisitToTpl" />}
              </Typography>
            </Box>

            <Box sx={{ py: 2 }}>
              <Typography
                color={"balack"}
                variant="h5"
                style={{ fontWeight: Fonts.BOLD }}
                sx={{ mr: 2 }}
                gutterBottom
                alignContent="center"
                alignItems="center"
              >
                {<IntlMessages id="visit.type" />}
              </Typography>
            </Box>

            <Grid item xs={12} sx={{ mb: 2 }}>
              {visitTypes?.length > 0 ? (
                visitTypes?.map((item, i) => (
                  <>
                    <Radio
                      key={i}
                      checked={selectedVisitTypeValue === item.id}
                      onChange={handleVisitTypeChange}
                      value={item.id}
                      name="visitTypeId"
                    />
                    <label>{<IntlMessages id={item.name} />}</label>
                  </>
                ))
              ) : (
                <NoData />
              )}
            </Grid>

          {selectedVisitTypeValue === "VmlzaXRUeXBlLTI=" && (
            <Box display="flex" sx={{ py: 2, mb: 2 }}>
                <Typography
                  color={palette.primary.dark}
                  sx={{ mr: 2 }}
                  alignContent="center"
                  alignItems="left"
                >
                  <CalendarTodayOutlinedIcon
                    sx={{ mr: -1, mt: -1.5 }}
                  ></CalendarTodayOutlinedIcon>
                </Typography>
                <Typography
                  color={"black"}
                  variant="h5"               
                  style={{ fontWeight: Fonts.BOLD }}
                  alignContent="center"
                  alignItems="center"
                >
                   <label id="NoteText">{selectedNote}</label>
                </Typography>
              </Box>
          )}
              

            <Box>
              <AppGridContainer spacing={5}>
                <Grid item xs={12} sx={{ mb: 2 }}>
                  <InputOrganizationSelectSingle
                    name="organizationId"
                    visitType_Id={"VmlzaXRUeXBlLTI="}
                    onChange={(data) => {
                      setFieldValue("organizationDes",  data["label"] ? data["label"] : "");
                      setFieldValue(
                        "locationName",
                        data["regionName"] ? data["regionName"] : ""
                      );
                      setFieldValue(
                        "locationDes",
                        data["regionName"] ? data["regionName"] : ""
                      );
                      setFieldValue("organizationId", data["id"]);

                      if(selectedVisitTypeValue=== "VmlzaXRUeXBlLTI=") 
                      {
                        ChangeTheNote(data["visitNote"] ? data["visitNote"] : "");
                      };
                    }}
                    label={<IntlMessages id="common.organization" />}
                    value={[values.organizationId] || undefined ||null}
                  />
                </Grid>

                <Grid item xs={12} sx={{ mb: 2 }}>
                  <AppTextField
                    fullWidth
                    InputProps={{
                      readOnly: true,
                      disabled: true,
                    }}
                    sx={{
                      fontWeight: Fonts.LIGHT,
                      marginBottom: 5,
                    }}
                    variant="outlined"
                    name="locationName"   
                  />
                </Grid>
              </AppGridContainer>
            </Box>
            <Box mb={5}>
              <AppGridContainer spacing={5}>
                <Grid item xs={12} sx={{ mb: 2 }}>
                  <FormControl fullWidth variant="outlined">
                    <DatePicker
                      // clearText
                      shouldDisableDate={disableWeekends}
                      views={["year", "month", "day"]}
                      inputFormat="dd/MM/yyyy"
                      minDate={moment(values?.visitDate)
                        .add(1, "days")
                        .toDate()}
                      label={<IntlMessages id="visit.date" />}
                      value={values.visitDate}
                      onChange={(value) => {
                        setFieldValue("visitDate", value);
                      }}
                      disablePast
                      InputProps={{ onKeyDown: preventOnKeyDown }}
                      renderInput={(params: any) => (
                        <AppTextField {...params} name="visitDate" fullWidth />
                      )}
                    />
                  </FormControl>
                </Grid>

                {visitTypes?.find(({ id }) => id === selectedVisitTypeValue)
                  ?.hasTime === true && (
                  <Grid item xs={12} sm={6}>
                    <FormControl fullWidth variant="outlined">
                      <TimePicker
                        // clearText
                        label={<IntlMessages id="visit.timeFrom" />}
                        value={values.fromTime}
                        onChange={(value) => setFieldValue("fromTime", value)}
                        InputProps={{ onKeyDown: preventOnKeyDown }}
                        renderInput={(params: any) => (
                          <AppTextField {...params} name="fromTime" fullWidth />
                        )}
                      />
                    </FormControl>
                  </Grid>
                )}
                {visitTypes?.find(({ id }) => id === selectedVisitTypeValue)
                  ?.hasTime === true && (
                  <Grid item xs={12} sm={6}>
                    <FormControl fullWidth variant="outlined">
                      <TimePicker
                        // clearText
                        label={<IntlMessages id="visit.timeTo" />}
                        value={values.toTime}
                        onChange={(value) => setFieldValue("toTime", value)}
                        InputProps={{ onKeyDown: preventOnKeyDown }}
                        renderInput={(params: any) => (
                          <AppTextField {...params} name="toTime" fullWidth />
                        )}
                      />
                    </FormControl>
                  </Grid>
                )}
              </AppGridContainer>
            </Box>

            <Box mb={5}>
              <AppGridContainer spacing={5}>
                <Grid item xs={12}>
                  <InputCoordinatorSelectSingle
                    name="mainCoordinators"
                     value={values.mainCoordinators || null || undefined}
                    onChange={(data) => {
                      setFieldValue("mainCoordinators", [data["id"]]);
                      setFieldValue("mainCoordinatorName", [data["label"]]);
                    }}
                    label={<IntlMessages id="visit.mainCoordinator" />}
                  />
                </Grid>

                <Grid item xs={12}>
                  <InputCoordinatorSelectSingle
                    name="alternativeCoordinators"
                    value={values.alternativeCoordinators || null || undefined}
                    // value={values.assignedOrganizations ?? null}
                    onChange={(data) => {
                      setFieldValue("alternativeCoordinators", [data["id"]]);
                      setFieldValue("alternativeCoordinatorName", [data["label"]]);

                    }}
                    label={<IntlMessages id="visit.alternativeCoordinator" />}
                  />
                </Grid>
              </AppGridContainer>
            </Box>

            <Box mb={5}>
              <AppTextField
                name="remarks"
                value={values.remarks ?? ""}
                id="remarks"
                multiline
                fullWidth
                sx={{
                  color: "text.primary",
                }}
                rows="6"
                variant="outlined"
                label={messages["common.remarks"] as string}
                required = {false}
              />
            </Box>

            <StyledDivider />
          </div>
          <div>
            <LoadingButton
              sx={{
                mr: 5,
                position: "relative",
                // minWidth: 120,
              }}
              loading={loading && isSubmitting}
              color="primary"
              variant="outlined"
              disabled={!isValid || isSubmitting}
              type="submit"
              onClick={()=>setOpenAddForm(false)}
              endIcon={<CheckCircleOutline />}
              loadingPosition="center"
            >
              <IntlMessages id="common.save" />
            </LoadingButton>
            <LoadingButton
              sx={{
                position: "relative",
                // minWidth: 120,
              }}
              loading={loading && isSubmitting}
              color="inherit"
              variant="outlined"
              disabled={!isValid || isSubmitting}
              type="button"
              onClick={()=>setOpenAddForm(false)}
              endIcon={<CheckCircleOutline />}
              loadingPosition="center"
            >
              <IntlMessages id="common.cancel" />
            </LoadingButton>
          </div>
        </Form>
      </DialogContent>
    </Dialog>
    </ContextProvider>
  );
};

export default AddHeathSafetyVisitBulkForm;