Untitled

import { Button, CircularProgress, Fade, Typography } from '@mui/material';
import { Modal, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { secureApi } from '../../Config/api';
import { errorMessage, getAllUsers, successMessage } from '../../utils/helpers';

const { Option } = Select;

const ShareProjectModal = (props) => {
  const { open, setOpen, name, id, instruction, getProjects } = props;
  const [instructionSharedUser, setInstructionSharedUser] = useState([]);
  const [loading, setLoading] = useState(false);
  const user = useSelector((state) => state?.authReducer?.user);
  const guest = useSelector((state) => state?.authReducer?.guest);
  const IS_INDIVIDUAL = useSelector((state) => state?.appReducer?.IS_INDIVIDUAL);
  const DI_PROJECT_URL = useSelector((state) => state?.appReducer?.DI_PROJECT_URL);
  const [allUsers, setAllUsers] = useState([]);
  const owner_id = guest?.owner_id || user?.user_id;
  const user_id = guest?.id || owner_id;

  useEffect(() => {
    setInstructionSharedUser(instruction?.projectUsers?.map((v) => v?.user_id) || []);
  }, [open]);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    const fetchedUsers = await getAllUsers(false);
    console.log('fetchedUsers', fetchedUsers);

    setAllUsers(fetchedUsers);
  };

  const handleChangeBox2 = (value) => {
    setInstructionSharedUser(value);
  };

  const handleCloseModal = () => {
    setOpen(false);
    setInstructionSharedUser([]);
  };

  const checkSharedUsers = () => {
    const currentSharedUsers = instruction?.projectUsers || [];
    console.log('currentSharedUsers', currentSharedUsers);
    console.log('instructionSharedUser', instructionSharedUser);

    const newSharedUsers = instructionSharedUser || [];


    if (!newSharedUsers?.length) {
      if (currentSharedUsers?.length) {
        shareProject("The user's access to the project has been removed!");
        return;
      } else {
        return errorMessage('Please select the users to share the project!');
      }
    }


    const hasChanges =
      currentSharedUsers?.length !== newSharedUsers?.length ||
      currentSharedUsers?.some((user) => !newSharedUsers?.includes(user.user_id)) ||
      newSharedUsers?.some((user_id) => !currentSharedUsers?.some((user) => user.user_id === user_id));

    if (!hasChanges) {
      return errorMessage('Please choose a different user, or cancel!');
    }

    if (!newSharedUsers?.length) {
      return errorMessage('Please select the users to share the project!');
    } else {
      shareProject('The project has been successfully shared!');
    }
  };

  const shareProject = (message) => {
    setLoading(true);

    let obj = {
      project_id: id,
      shared_with: instructionSharedUser,
    };

    secureApi
      .post(`${DI_PROJECT_URL}/api/v1.0/project/share`, obj, { withCredentials: true })
      .then((data) => {
        if (data?.success) {
          setLoading(false);
          handleCloseModal();
          getProjects();
          successMessage(message);
        } else {
          setLoading(false);
          handleCloseModal();
          errorMessage(data?.message);
        }
      })
      .catch((err) => {
        console.log('err', err);
        setLoading(false);
      });
  };

  return (
    <Modal
      aria-labelledby="spring-modal-title"
      aria-describedby="spring-modal-description"
      open={open}
      className="file_upload_modal_cont antd-ins-modal share-editor-modal"
      onClose={handleCloseModal}
      closeAfterTransition
      footer={null}
      destroyOnClose={true}
      onCancel={handleCloseModal}
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Fade style={{ width: '500px' }} in={open}>
        <div className="tab-section-dtl">
          <div className="tab-section-dtl-sub b-noned">
            <div className="custom_instruct">
              <span
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: '100%',
                }}
              >
                <h4 className="people-access" style={{ fontWeight: '800' }}>
                  Share {name}
                </h4>
              </span>
            </div>
          </div>
          <div className="select-user-dp" style={{ margin: '10px 0px' }}>
            <Select
              mode="multiple"
              className="selectoption"
              style={{ maxHeight: 100, borderRadius: '5px', width: '100%' }}
              value={instructionSharedUser}
              onChange={handleChangeBox2}
              placeholder="Select User"
              maxTagCount={'responsive'}
              filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
              {allUsers
                ?.filter((u) => u?.user_id !== user_id)
                ?.map((v, i) => {
                  return (
                    <Option
                      style={{
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                      }}
                      key={i}
                      value={v?.id}
                    >
                      {v?.email}
                    </Option>
                  );
                })}
            </Select>
          </div>
          <div>
            <h4 className="people-access">People with access</h4>
            <div
              style={{
                maxHeight: '250px',
                minHeight: '150px',
                overflow: 'auto',
              }}
            >
              <div style={{ display: 'flex' }}>
                <div>
                  <Typography sx={{ fontSize: 15 }}>
                    <b>-</b> {user?.name} ({user?.email})
                  </Typography>
                </div>
              </div>
              {instruction?.projectUsers?.map((v, i) => {
                return (
                  <div style={{ display: 'flex' }}>
                    <div>
                      <Typography sx={{ fontSize: 15 }}>
                        <b>-</b> {v?.user?.name} ({v?.user?.email})
                      </Typography>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button variant="outlined" style={{ marginRight: 6 }} onClick={handleCloseModal}>
              Cancel
            </Button>
            <Button loading={loading} variant="contained" style={{ marginRight: 6 }} onClick={checkSharedUsers}>
              {loading ? (
                <>
                  <CircularProgress size={20} style={{ color: 'white' }} />
                  &nbsp; Done
                </>
              ) : (
                'Done'
              )}
            </Button>
          </div>
        </div>
      </Fade>
    </Modal>
  );
};

export default ShareProjectModal;