personModal

import {
  styled, Button, Grid, Box, Stack, Typography, Alert,
} from '@mui/material';
import FieldSet from 'components/FieldSet';
import TextField from 'components/TextField';
import { selectors as authSelector } from 'ducks/Auth';
import { selectors as locationSelectors } from 'ducks/Location';
import { operations as modalOperations } from 'ducks/Modal';
import { DELETE_PERSON } from 'constants/modalTypes';
import * as rootSelectors from 'ducks/selectors';
import {
  constants as teamConstants,
  operations as teamOperations,
  selectors as teamSelectors,
  actions as teamActions,
} from 'ducks/Team';
import { Formik, FormikErrors } from 'formik';
import If from 'lib/If';
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { connect, useSelector, useDispatch } from 'react-redux';
import { getTeamMemberSchema } from 'schemas/validation';
import PhoneInput from 'shared/PhoneInput/PhoneInput';
import TeamMemberModalLocationDropdown from 'shared/TeamMemberModalLocationDropdown';
import TeamMemberModalRoleDropdown from 'shared/TeamMemberModalRoleDropdown';
import { getChangedValues } from 'utils/helpers';
import { trackEvent } from '@sbd-ctg/user-behavior-tracking';
import { SELECT_ALL_VALUE } from 'constants/app';
import Modal from '../../Components/Modal';
import ModalButton from '../../Components/ModalButton';
import ModalHeader from '../../Components/ModalHeader';

const StyledFormModal = styled(Modal)(() => ({
  maxWidth: 600,
}));

interface TeamMember {
  status: string,
  name: string,
  email: string,
  firstName: string,
  lastName: string,
  memberId: string,
  division: string,
  employeeId: string,
  inviteStatus: string,
  role: {
    userId: string,
    roleId: string,
  },
  locations: {
    locationId: string,
    name: string,
  }[],
  invite: {
    employeeId: string,
    division: string,
    status: string,
  },
}

interface UpdatedPerson {
  email?: string;
  memberId?: string | null;
  roleId?: number;
  resources?: {
    locations?: string[];
  };
  locations?: string[];
}
interface PersonModalProps {
  createPerson: (person: any) => Promise<any>;
  formType?: 'create' | 'update';
  hideModal: () => void;
  activateUser: (data: { companyId: string; email: string }) => Promise<any>;
  rejectUser: (email: string, company: { companyId: string }) => Promise<any>;
  resendInvitation1: (person: any) => Promise<any>;
  resendInvitation2: (person: any) => Promise<any>;
  showModal: (modal: string, data: any) => void;
  loadTeamMembers: () => void;
  fetchActiveUserJobSitesListGet: (memberId: string, companyId: string) => Promise<any>;
  fetchPendingUserJobSitesListGet: (email: string, companyId: string) => Promise<any>;
  teamMember?: TeamMember;
  updatePerson: (email: string, person: any) => Promise<any>;
}

const PersonModal = ({
  createPerson,
  formType = 'create',
  hideModal,
  showModal,
  resendInvitation1,
  resendInvitation2,
  activateUser,
  rejectUser,
  loadTeamMembers,
  teamMember,
  updatePerson,
  fetchActiveUserJobSitesListGet,
  fetchPendingUserJobSitesListGet,
}: PersonModalProps) => {
  const { t } = useTranslation();
  const formikRef = useRef<any>();
  const dispatch = useDispatch();
  const teamMembers = useSelector(rootSelectors.getCurrentCompanyTeamMembers);
  const companyId = useSelector((state: any) => state.global.selectedCompanyId);
  const locations = useSelector(locationSelectors.getAllListedLocations);
  const userCountry = useSelector(authSelector.getUserCountry);

  useEffect(() => {
    if (!teamMembers) {
      loadTeamMembers();
    }
  }, [teamMembers, loadTeamMembers]);

  const isUpdating = formType === 'update';
  const initialInviteStatus = teamMember?.inviteStatus || '';
  const [canApprove, setCanApprove] = useState<boolean>(
    formType === 'create' ? false : initialInviteStatus === 'PENDING',
  );

  const [pendingDataUser, setPendingUser] = useState<any>({});
  const [showOwnerErrorMsg, setShowOwnerErrorMsg] = useState(false);
  const [showMemberErrorMsg, setShowMemberErrorMsg] = useState(false);
  const [errorBanner, setErrorBanner] = useState('');
  const [temporaryAccountId, setTemporaryAccountId] = useState<string | null>(null);

  let employeeId = '';
  if (teamMember) {
    if (teamSelectors.hasPendingInvite(teamMember)) {
      employeeId = teamMember.invite.employeeId || '';
    } else {
      employeeId = teamMember.employeeId || '';
    }
  }

  function getPhoneData() {
    let phone = teamSelectors.getMemberPhone(teamMember) || '';
    let country = teamSelectors.getMemberCountry(teamMember) || userCountry;
    country = country.toLowerCase();
    if (country === 'us' && phone.length === 10) {
      phone = `1${phone}`;
    }

    return {
      phone,
      country,
    };
  }

  const initData = isUpdating
    ? {
      email: teamMember?.email || '',
      name: teamSelectors.getMemberName(teamMember),
      firstName: teamMember?.firstName || '',
      lastName: teamMember?.lastName || '',
      employeeId,
      ...getPhoneData(),
      roleId: teamMember?.role.roleId || '',
      division: teamMember?.division || '',
      locations:
          teamMember?.locations?.map((loc: any) => ({
            label: loc.name,
            value: loc.locationId,
          })) || [],
    }
    : {
      name: '',
      email: '',
      phone: '',
      roleId: '',
      inviteAsSMS: false,
      country: userCountry,
      employeeId,
      locations: [],
    };

  async function fetchAndUpdateLocations() {
    try {
      let apiResult;

      if (teamMember?.status === 'invited') {
        apiResult = await fetchPendingUserJobSitesListGet(teamMember.email, companyId);
      } else {
        apiResult = await fetchActiveUserJobSitesListGet(teamMember!.memberId!, companyId);
      }

      if (!apiResult.error && apiResult?.payload?.data?.data) {
        const locationsData = apiResult.payload.data
          .data.map((l: { name: string; id: string }) => ({
            label: l.name,
            value: l.id,
          }));
        if (formikRef.current) {
          formikRef.current.setFieldValue('locations', locationsData);
        }
      }
    } catch (error) {
      console.error('Failed to fetch locations', error);
    }
  }

  useEffect(() => {
    if (isUpdating && teamMember && !teamSelectors.isAdmin(teamMember)) {
      fetchAndUpdateLocations();
    }
  }, [isUpdating, teamMember]);

  function handleCloseModal() {
    if (isUpdating) {
      trackEvent('edit_cancel', { category: 'People' });
    }
    hideModal();
  }

  function rejectUserTrigger() {
    rejectUser(teamMember!.email!, { companyId }).then(() => {
      dispatch(teamActions.refreshPeopleTable());
      hideModal();
    });
  }

  function handleDelete() {
    if (canApprove) {
      rejectUserTrigger();
    } else {
      showModal(DELETE_PERSON, { teamMember: teamMember || pendingDataUser });
    }
  }

  function activateUserTrigger() {
    activateUser({
      companyId,
      email: pendingDataUser.email || teamMember!.email,
    } as any).then((response) => {
      trackEvent('active_user', { category: 'People' });
      setTemporaryAccountId(response.payload.data.data.accountId);
      setCanApprove(false);
      dispatch(teamActions.refreshPeopleTable());
    });
  }

  function handleResendInvitation(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
    const personData = formikRef.current.values;
    resendInvitation2(personData)
      .then((response) => {
        if (response.payload.status === 200) {
          resendInvitation1({
            ...personData,
            country: personData.country.toUpperCase(),
          });
        }
      })
      .then(hideModal);
  }

  function preparePersonData(values: any) {
    const fullName = `${values.firstName} ${values.lastName}`;
    const selectedLocationIds = values.locations.reduce((acc: any, location: any) => {
      if (location.value !== SELECT_ALL_VALUE) {
        acc.push(location.value);
      }
      return acc;
    }, []);
    const isAllJobSitesAssigned = selectedLocationIds.length > 0
    && locations.length > 0
    && selectedLocationIds.length >= locations.length;
    return { fullName, isAllJobSitesAssigned, selectedLocationIds };
  }

  function handleCreatePerson(values: any) {
    const { fullName, isAllJobSitesAssigned, selectedLocationIds } = preparePersonData(values);
    const newPerson = {
      ...values,
      name: fullName,
      isAllJobSitesAssigned,
    };

    if (values.roleId <= teamConstants.ROLES.ADMIN) {
      delete newPerson.resources;
      delete newPerson.locations;
    } else {
      newPerson.resources = { locations: selectedLocationIds };
      delete newPerson.locations;
    }

    createPerson(newPerson).then((response: any) => {
      if (response.error === 'PENDING_INVITE_CONFLICT') {
        setPendingUser(response.pendingRequest);
        setShowOwnerErrorMsg(true);
        setErrorBanner(response.error);
      } else if (response === 'OWNER_INVITE_CONFLICT') {
        setShowOwnerErrorMsg(true);
        setErrorBanner(response);
      } else if (response === 'MEMBER_INVITE_CONFLICT' || response === 'Unexpected Error') {
        setShowMemberErrorMsg(true);
      } else {
        setShowOwnerErrorMsg(false);
        setShowMemberErrorMsg(false);
        hideModal();
      }
    });
  }

  function handleResources(updatedPerson: UpdatedPerson, values: any, personRole: any) {
    const newUpdatedPerson = { ...updatedPerson };

    if ([teamConstants.ROLES.MANAGER, teamConstants.ROLES.SITE_ADMIN].includes(personRole)) {
      newUpdatedPerson.resources = { locations: values.locations };
    } else if (
      newUpdatedPerson.locations
      && newUpdatedPerson.locations.length === initData.locations.length
      && newUpdatedPerson.locations
        .every((location: any, i: number) => location === initData.locations[i])
    ) {
      delete newUpdatedPerson.resources;
    } else if (personRole === teamConstants.ROLES.ADMIN) {
      delete newUpdatedPerson.resources;
    }

    if (newUpdatedPerson.resources && newUpdatedPerson.resources.locations) {
      const { resources } = newUpdatedPerson;
      const newLocations = resources?.locations?.filter((locId: any) => {
        const location = locations.find(({ locationId }: any) => locationId === locId);
        return !location?.parentLocation
        || !resources?.locations?.includes(location.parentLocation);
      });
      newUpdatedPerson.resources = { ...resources, locations: newLocations };
    }

    return newUpdatedPerson;
  }

  function handleUpdatePerson(values: any) {
    const { fullName, isAllJobSitesAssigned, selectedLocationIds } = preparePersonData(values);
    const updatedValues = {
      ...values,
      name: fullName,
      isAllJobSitesAssigned,
    };

    ['lastName', 'firstName', 'locations'].forEach(prop => delete updatedValues[prop]);
    const updatedPerson: UpdatedPerson = getChangedValues(initData, updatedValues);
    const personRole = updatedPerson.roleId || values.roleId;

    if (temporaryAccountId) {
      updatedPerson.memberId = temporaryAccountId;
    }

    handleResources(updatedPerson, values, personRole);

    if (Object.keys(updatedPerson).length === 0) {
      hideModal();
    } else {
      const { memberId, email } = teamMember || updatedPerson;
      const person = {
        email,
        memberId: memberId === null ? email : memberId,
        ...updatedPerson,
        resources: {
          locations: selectedLocationIds,
        },
      };
      updatePerson(email!, person).then(hideModal);
    }
  }

  function handleSubmit(values: any) {
    if (temporaryAccountId || formType === 'update') {
      handleUpdatePerson(values);
    } else {
      handleCreatePerson(values);
    }
  }

  const PersonInfoForm = ({
    error,
    touchedField,
    disabled,
  }: {
    error: string | string[] | FormikErrors<any> | FormikErrors<any>[];
    touchedField: boolean;
    disabled?: boolean;
  }) => {
    const errorMessage = Array.isArray(error) ? error.join(', ') : error;
    return (
      <FieldSet title={t('PersonModal.Headers.ContactInfo')}>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <TextField
              label={t('PersonModal.Fields.FirstName')}
              name="firstName"
              disabled={disabled}
              testId="person-name"
              required
              fullWidth
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t('PersonModal.Fields.LastName')}
              name="lastName"
              disabled={disabled}
              testId="person-last-name"
              required
              fullWidth
            />
          </Grid>
          <Grid item xs={12}>
            <Grid container rowSpacing={2}>
              <Grid item xs={12}>
                <TextField
                  label={t('PersonModal.Fields.Email')}
                  testId="person-email"
                  name="email"
                  type="email"
                  required
                  disabled={isUpdating || !!disabled || !!temporaryAccountId}
                  error={showMemberErrorMsg || (touchedField && !!errorMessage)}
                  handleChange={() => setShowMemberErrorMsg(false)}
                  helperText={showMemberErrorMsg ? t('PersonModal.ExistingTeamMember') : undefined}
                  fullWidth
                />
              </Grid>
              <Grid item xs={12}>
                <PhoneInput
                  label={t('PersonModal.Fields.Phone')}
                  dataTestid="person-phonenum"
                  name="phone"
                  disabled={disabled}
                  section="people"
                  isDark={false}
                  autoComplete="off"
                  countryField={undefined}
                />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </FieldSet>
    );
  };

  const errorDescription: any = {
    OWNER_INVITE_CONFLICT: t('PersonModal.Errors.UnableInviteDescription'),
    PENDING_INVITE_CONFLICT: t('PersonModal.Errors.MemberJoined'),
  };

  const ResendInvite = () => (
    <Alert severity="warning" style={{ marginBottom: '32px' }}>
      <Typography variant="body1" fontWeight={500}>
        {t('PersonModal.ResendInvite.InviteExpired')}
      </Typography>
      <Typography variant="body1">{t('PersonModal.ResendInvite.TimeExpired')}</Typography>
      <Button
        color="primary"
        variant="contained"
        onClick={handleResendInvitation}
        style={{ marginTop: '12px' }}
        size="small"
        type="submit"
      >
        {t('PersonModal.ResendInvite.ResendInvite')}
      </Button>
    </Alert>
  );

  const ApproveSection = () => (
    <Alert severity="warning" style={{ marginBottom: '32px' }}>
      <Typography variant="body1" fontWeight={500}>
        {t('PersonModal.PendingSection.PendingUser')}
      </Typography>
      <Typography variant="body1">{t('PersonModal.PendingSection.JoinCode')}</Typography>
      <Button
        color="primary"
        variant="contained"
        onClick={activateUserTrigger}
        style={{ marginTop: '12px' }}
        size="small"
        type="button"
      >
        {t('PersonModal.PendingSection.ActivateUser')}
      </Button>
    </Alert>
  );

  const getButtons = (submitForm: () => void, disabled: boolean) => (
    <Stack direction="row" justifyContent="flex-end">
      <If condition={!canApprove && (isUpdating || temporaryAccountId)}>
        <ModalButton buttonVariant="delete" onClick={handleDelete} data-testid="delete-invite">
          {t('FormModal.DeleteText')}
        </ModalButton>
      </If>
      <ModalButton onClick={handleCloseModal} data-testid="cancel-invite" buttonVariant="cancel">
        {t('PersonModal.CancelText')}
      </ModalButton>
      <ModalButton onClick={submitForm} data-testid="invite-person-save" disabled={disabled}>
        {isUpdating ? t('PersonModal.Update.ConfirmText') : t('PersonModal.Create.ConfirmText')}
      </ModalButton>
    </Stack>
  );

  const formTitle = isUpdating ? t('PersonModal.Update.Title') : t('PersonModal.Create.Title');

  const disabledSubmitButton = (values: any) => !values.firstName
    || !values.lastName
    || !values.email
    || !values.roleId
    || (values.roleId > teamConstants.ROLES.ADMIN
      && (!values.locations || values.locations.length === 0));

  return (
    <Grid container rowSpacing={2}>
      <Formik
        onSubmit={handleSubmit}
        validationSchema={getTeamMemberSchema(teamMembers, initData)}
        initialValues={Object.keys(pendingDataUser).length > 0 ? pendingDataUser : initData}
        innerRef={formikRef as any}
      >
        {({
          values, touched, errors, submitForm,
        }) => (
          <StyledFormModal
            className="tool-modal"
            header={(
              <ModalHeader
                noBorder
                noTransform
                title={formTitle}
                onClose={handleCloseModal}
                testId={{ closeButton: 'close-new-person' }}
              />
            )}
            footer={getButtons(submitForm, disabledSubmitButton(values))}
          >
            <If condition={showOwnerErrorMsg}>
              <Alert severity="error" style={{ marginBottom: '32px' }}>
                <Typography variant="body1" fontWeight={500}>
                  {t('PersonModal.Errors.InviteTitle')}
                </Typography>
                <Typography variant="body1">{errorDescription[errorBanner]}</Typography>
              </Alert>
            </If>
            <If condition={canApprove}>
              <ApproveSection />
            </If>
            <If
              condition={
                !canApprove
                && !temporaryAccountId
                && isUpdating
                && teamMember?.inviteStatus === 'EXPIRED'
              }
            >
              <ResendInvite />
            </If>
            <Box padding="0 32px">
              <PersonInfoForm
                error={errors.email || ''}
                disabled={canApprove}
                touchedField={!!touched.email}
              />
              <Grid item xs={12}>
                <FieldSet title={t('PersonModal.Headers.Details')}>
                  <Grid container rowSpacing={2}>
                    {(canApprove
                      || Boolean(temporaryAccountId)
                      || formType !== 'update'
                      || teamSelectors.hasPendingInvite(teamMember)) && (
                      <Grid item xs={12}>
                        <TextField
                          label={t('PersonModal.Fields.IdNumber')}
                          name="employeeId"
                          disabled={canApprove}
                          testId="person-id-number"
                          maxLength={28}
                          fullWidth
                        />
                      </Grid>
                    )}
                    <Grid item xs={12}>
                      <TextField
                        label={t('PersonModal.Fields.Division')}
                        name="division"
                        disabled={canApprove}
                        testId="person-division"
                        fullWidth
                      />
                    </Grid>
                    <Grid item xs={12}>
                      <TeamMemberModalRoleDropdown disabled={canApprove} />
                    </Grid>
                    <If
                      condition={
                        values.roleId > teamConstants.ROLES.ADMIN
                        || (values.roleId * 1 === 0 && values.roleId === '')
                      }
                    >
                      <Grid item xs={12}>
                        <TeamMemberModalLocationDropdown disabled={canApprove} />
                      </Grid>
                    </If>
                  </Grid>
                </FieldSet>
              </Grid>
            </Box>
          </StyledFormModal>
        )}
      </Formik>
    </Grid>
  );
};

const mapDispatchToProps = {
  createPerson: teamOperations.createAndLoadTeamMember,
  resendInvitation1: teamOperations.resendAndLoadMember as any,
  resendInvitation2: teamOperations.resendInvitation2 as any,
  activateUser: teamOperations.activateUser as any,
  rejectUser: teamOperations.rejectUser as any,
  hideModal: modalOperations.hideModal,
  showModal: modalOperations.showModal,
  updatePerson: teamOperations.updateAndLoadTeamMember,
  loadTeamMembers: teamOperations.getTeamLegacy,
  fetchActiveUserJobSitesListGet: teamOperations.fetchActiveUserJobSitesListGet as any,
  fetchPendingUserJobSitesListGet: teamOperations.fetchPendingUserJobSitesListGet as any,
};

export default connect(null, mapDispatchToProps)(PersonModal);