tsms/src/components/CreateProject/ProjectClientDetails.tsx

"use client";

import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
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 Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import CardActions from "@mui/material/CardActions";
import RestartAlt from "@mui/icons-material/RestartAlt";
import Button from "@mui/material/Button";
import { Controller, useFormContext } from "react-hook-form";
import { CreateProjectInputs } from "@/app/api/projects/actions";
import {
  BuildingType,
  ContractType,
  FundingType,
  LocationType,
  MainProject,
  ProjectCategory,
  ServiceType,
  WorkNature,
} from "@/app/api/projects";
import { StaffResult } from "@/app/api/staff";
import { Contact, Customer, Subsidiary } from "@/app/api/customer";
import Link from "next/link";
import React, { useEffect, useMemo, useState } from "react";
import { fetchCustomer } from "@/app/api/customer/actions";
import { Autocomplete, Checkbox, ListItemText } from "@mui/material";
import uniq from "lodash/uniq";
import ControlledAutoComplete from "../ControlledAutoComplete/ControlledAutoComplete";

interface Props {
  isActive: boolean;
  isSubProject: boolean;
  isEditMode: boolean;
  mainProjects?: MainProject[];
  projectCategories: ProjectCategory[];
  teamLeads: StaffResult[];
  allCustomers: Customer[];
  allSubsidiaries: Subsidiary[];
  serviceTypes: ServiceType[];
  contractTypes: ContractType[];
  fundingTypes: FundingType[];
  locationTypes: LocationType[];
  buildingTypes: BuildingType[];
  workNatures: WorkNature[];
}

const ProjectClientDetails: React.FC<Props> = ({
  isActive,
  isSubProject,
  isEditMode,
  mainProjects,
  projectCategories,
  teamLeads,
  allCustomers,
  allSubsidiaries,
  serviceTypes,
  contractTypes,
  fundingTypes,
  locationTypes,
  buildingTypes,
  workNatures,
}) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors, defaultValues },
    watch,
    control,
    setValue,
    getValues,
    reset,
    resetField,
  } = useFormContext<CreateProjectInputs>();

  const subsidiaryMap = useMemo<{
    [id: Subsidiary["id"]]: Subsidiary;
  }>(
    () => allSubsidiaries.reduce((acc, sub) => ({ ...acc, [sub.id]: sub }), {}),
    [allSubsidiaries],
  );

  const selectedCustomerId = watch("clientId");
  const selectedCustomer = useMemo(
    () => allCustomers.find((c) => c.id === selectedCustomerId),
    [allCustomers, selectedCustomerId],
  );

  const [customerContacts, setCustomerContacts] = useState<Contact[]>([]);
  const [subsidiaryContacts, setSubsidiaryContacts] = useState<Contact[]>([]);
  const [customerSubsidiaryIds, setCustomerSubsidiaryIds] = useState<number[]>(
    [],
  );

  const selectedCustomerContactId = watch("clientContactId");
  const selectedCustomerContact = useMemo(
    () =>
      subsidiaryContacts.length > 0 ?
        subsidiaryContacts.find((contact) => contact.id === selectedCustomerContactId)
        : customerContacts.find(
          (contact) => contact.id === selectedCustomerContactId,
        ),
    [subsidiaryContacts, customerContacts, selectedCustomerContactId],
  );

  // get customer (client) contact combo
  const clientSubsidiaryId = watch("clientSubsidiaryId")
  const [firstCustomerLoaded, setFirstCustomerLoaded] = useState(false)
  useEffect(() => {
    if (selectedCustomerId !== undefined) {
      fetchCustomer(selectedCustomerId).then(({ contacts, subsidiaryIds }) => {
        setCustomerContacts(contacts);
        setCustomerSubsidiaryIds(subsidiaryIds);

        // if (subsidiaryIds.length > 0) setValue("clientSubsidiaryId", subsidiaryIds[0])
        // else
        if (isEditMode && !firstCustomerLoaded) { setFirstCustomerLoaded(true) }
        else if (subsidiaryIds.length > 0) setValue("clientSubsidiaryId", clientSubsidiaryId !== undefined && clientSubsidiaryId !== null ? subsidiaryIds.includes(clientSubsidiaryId) ? clientSubsidiaryId : null : null)
        // if (contacts.length > 0) setValue("clientContactId", contacts[0].id)
        // else setValue("clientContactId", undefined)
      });
    }
  }, [selectedCustomerId]);

  useEffect(() => {
    if (Boolean(clientSubsidiaryId)) {
      // get subsidiary contact combo
      const contacts = allSubsidiaries.find(subsidiary => subsidiary.id === clientSubsidiaryId)?.subsidiaryContacts!!
      setSubsidiaryContacts(() => contacts)
      setValue("clientContactId", selectedCustomerId === defaultValues?.clientId && Boolean(defaultValues?.clientSubsidiaryId) ? contacts.find(contact => contact.id === defaultValues.clientContactId)?.id ?? contacts[0].id : contacts[0].id)
      setValue("isSubsidiaryContact", true)
    } else if (customerContacts?.length > 0) {
      setSubsidiaryContacts(() => [])
      setValue("clientContactId", selectedCustomerId === defaultValues?.clientId && !Boolean(defaultValues?.clientSubsidiaryId) ? customerContacts.find(contact => contact.id === defaultValues.clientContactId)?.id ?? customerContacts[0].id : customerContacts[0].id)
      setValue("isSubsidiaryContact", false)
    }
  }, [customerContacts, clientSubsidiaryId, selectedCustomerId]);

  // Automatically add the team lead to the allocated staff list
  const selectedTeamLeadId = watch("projectLeadId");
  useEffect(() => {
    if (selectedTeamLeadId !== undefined) {
      const currentStaffIds = getValues("allocatedStaffIds");
      const newList = uniq([...currentStaffIds, selectedTeamLeadId]);
      setValue("allocatedStaffIds", newList);
    }
  }, [getValues, selectedTeamLeadId, setValue]);

  // Automatically update the project & client details whene select a main project
  const mainProjectId = watch("mainProjectId")
  useEffect(() => {
    if (mainProjectId !== undefined && mainProjects !== undefined && !isEditMode) {
      const mainProject = mainProjects.find(project => project.projectId === mainProjectId);

      if (mainProject !== undefined) {
        setValue("projectName", mainProject.projectName)
        setValue("projectCategoryId", mainProject.projectCategoryId)
        setValue("projectLeadId", mainProject.projectLeadId)
        setValue("serviceTypeId", mainProject.serviceTypeId)
        setValue("fundingTypeId", mainProject.fundingTypeId)
        setValue("contractTypeId", mainProject.contractTypeId)
        setValue("locationId", mainProject.locationId)
        setValue("buildingTypeIds", mainProject.buildingTypeIds)
        setValue("workNatureIds", mainProject.workNatureIds)
        setValue("projectDescription", mainProject.projectDescription)
        setValue("expectedProjectFee", mainProject.expectedProjectFee)
        setValue("isClpProject", mainProject.isClpProject)
        setValue("clientId", mainProject.clientId)
        setValue("clientSubsidiaryId", mainProject.clientSubsidiaryId)
        setValue("clientContactId", mainProject.clientContactId)
      }
    }
  }, [getValues, mainProjectId, setValue, isEditMode])

  // const buildingTypeIdNameMap = buildingTypes.reduce<{ [id: number]: string }>(
  //   (acc, building) => ({ ...acc, [building.id]: building.name }),
  //   {},
  // );

  // const workNatureIdNameMap = workNatures.reduce<{ [id: number]: string }>(
  //   (acc, wn) => ({ ...acc, [wn.id]: wn.name }),
  //   {},
  // );

  return (
    <Card sx={{ display: isActive ? "block" : "none" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Project Details")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            {
              isSubProject && mainProjects !== undefined && <><Grid item xs={6}>
                <ControlledAutoComplete
                  control={control}
                  options={[...mainProjects.map(mainProject => ({ id: mainProject.projectId, label: `${mainProject.projectCode} - ${mainProject.projectName}` }))]}
                  name="mainProjectId"
                  label={t("Main Project")}
                  noOptionsText={t("No Main Project")}
                  disabled={isEditMode}
                />
              </Grid>
                <Grid item sx={{ display: { xs: "none", sm: "block" } }} /></>
            }
            <Grid item xs={6}>
              <TextField
                label={t("Project Code")}
                fullWidth
                disabled
                {...register("projectCode",
                  // {
                  //   required: "Project code required!",
                  // }
                )}
              // error={Boolean(errors.projectCode)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Project Name")}
                fullWidth
                {...register("projectName", {
                  required: "Project name required!",
                })}
                error={Boolean(errors.projectName)}
              />
            </Grid>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={projectCategories}
                name="projectCategoryId"
                label={t("Project Category")}
                noOptionsText={t("No Project Category")}
              />
            </Grid>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={teamLeads.map((staff) => ({ ...staff, label: `${staff.staffId} - ${staff.name} (${staff.team})` }))}
                name="projectLeadId"
                label={t("Team Lead")}
                noOptionsText={t("No Team Lead")}
              />
            </Grid>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={serviceTypes}
                name="serviceTypeId"
                label={t("Service Type")}
                noOptionsText={t("No Service Type")}
              />
            </Grid>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={fundingTypes}
                name="fundingTypeId"
                label={t("Funding Type")}
                noOptionsText={t("No Funding Type")}
              />
            </Grid>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={contractTypes}
                name="contractTypeId"
                label={t("Contract Type")}
                noOptionsText={t("No Contract Type")}
              />
            </Grid>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={locationTypes}
                name="locationId"
                label={t("Location")}
                noOptionsText={t("No Location")}
              />
            </Grid>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={buildingTypes}
                name="buildingTypeIds"
                label={t("Building Types")}
                noOptionsText={t("No Building Types")}
                isMultiple
              />
            </Grid>

            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={workNatures}
                name="workNatureIds"
                label={t("Work Nature")}
                noOptionsText={t("No Work Nature")}
                isMultiple
              />
            </Grid>

            <Grid item xs={6}>
              <TextField
                label={t("Project Description")}
                fullWidth
                {...register("projectDescription", {
                  required: "Please enter a description",
                })}
                error={Boolean(errors.projectDescription)}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Expected Total Project Fee")}
                fullWidth
                type="number"
                inputProps={{ step: "0.01" }}
                {...register("expectedProjectFee", { valueAsNumber: true })}
              />
            </Grid>

            <Grid item xs={6}>
              <TextField
                label={t("Sub-Contract Fee")}
                fullWidth
                type="number"
                inputProps={{ step: "0.01" }}
                {...register("subContractFee", { valueAsNumber: true })}
              />
            </Grid>

            <Grid item xs={6}>
              <Checkbox
                {...register("isClpProject")}
                checked={Boolean(watch("isClpProject"))}
              />
              <Typography variant="overline" display="inline">
                {t("CLP Project")}
              </Typography>
            </Grid>
          </Grid>
        </Box>

        <Box>
          <Stack
            direction="row"
            alignItems="center"
            marginBlockEnd={1}
            spacing={2}
          >
            <Typography variant="overline" display="block">
              {t("Client Details")}
            </Typography>
            <Button LinkComponent={Link} href="/settings/customer">
              {t("Add or Edit Clients")}
            </Button>
          </Stack>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <ControlledAutoComplete
                control={control}
                options={allCustomers.map((customer) => ({ ...customer, label: `${customer.code} - ${customer.name}` }))}
                name="clientId"
                label={t("Client")}
                noOptionsText={t("No Client")}
                rules={{
                  required: "Please select a client"
                }}
              />
            </Grid>
            <Grid item sx={{ display: { xs: "none", sm: "block" } }} />
            <Grid item xs={6}>
              <TextField
                label={t("Client Type")}
                InputProps={{
                  readOnly: true,
                }}
                fullWidth
                value={selectedCustomer?.customerType.name || ""}
              />
            </Grid>
            <Grid item sx={{ display: { xs: "none", sm: "block" } }} />
            {customerContacts.length > 0 && (
              <>
                <Grid item xs={6}>
                  <ControlledAutoComplete
                    control={control}
                    options={[{ label: t("No Subsidiary") }, ...customerSubsidiaryIds
                      .filter((subId) => subsidiaryMap[subId])
                      .map((subsidiaryId, index) => {
                        const subsidiary = subsidiaryMap[subsidiaryId]
                        return { id: subsidiary.id, label: `${subsidiary.code} - ${subsidiary.name}` }
                      })]}
                    name="clientSubsidiaryId"
                    label={t("Client Subsidiary")}
                    noOptionsText={t("No Client Subsidiary")}
                  />
                </Grid>
                <Grid item xs={6}>
                  <ControlledAutoComplete
                    control={control}
                    options={Boolean(watch("clientSubsidiaryId")) ? subsidiaryContacts : customerContacts}
                    name="clientContactId"
                    label={t("Client Lead")}
                    noOptionsText={t("No Client Lead")}
                    rules={{
                      validate: (value) => {
                        if (
                          (customerContacts.length > 0 && !customerContacts.find(
                            (contact) => contact.id === value,
                          )) && (subsidiaryContacts?.length > 0 && !subsidiaryContacts.find(
                            (contact) => contact.id === value,
                          ))
                        ) {
                          return t("Please provide a valid contact");
                        } else return true;
                      },
                    }}
                  />
                </Grid>
                <Grid container sx={{ display: { xs: "none", sm: "block" } }} />
                <Grid item xs={6}>
                  <TextField
                    label={t("Client Lead Phone Number")}
                    fullWidth
                    InputProps={{
                      readOnly: true,
                    }}
                    value={selectedCustomerContact?.phone || ""}
                  />
                </Grid>
                <Grid item xs={6}>
                  <TextField
                    label={t("Client Lead Email")}
                    fullWidth
                    InputProps={{
                      readOnly: true,
                    }}
                    value={selectedCustomerContact?.email || ""}
                  />
                </Grid>
              </>
            )}
          </Grid>
        </Box>
        {/* <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button variant="text" startIcon={<RestartAlt />}>
            {t("Reset")}
          </Button>
        </CardActions> */}
      </CardContent>
    </Card>
  );
};

export default ProjectClientDetails;