encoach_frontend/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
import Option from "@/interfaces/option";
import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
import Image from "next/image";
import { useEffect, useMemo, useState } from "react";
import { AiOutlineUserAdd } from "react-icons/ai";
import { BsTrash } from "react-icons/bs";
import { LuGripHorizontal } from "react-icons/lu";
import WorkflowStepNumber from "./WorkflowStepNumber";
import WorkflowStepSelects from "./WorkflowStepSelects";

interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
    isCompleted: boolean,
}

export default function WorkflowEditableStepComponent({
    stepNumber,
    assignees = [null],
    finalStep,
    onDelete,
    onSelectChange,
    entityApprovers,
    isCompleted,
}: Props) {

    const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
    const [isAdding, setIsAdding] = useState(false);

    const approverOptions: Option[] = useMemo(() => 
        entityApprovers
            .map((approver) => ({
                value: approver.id,
                label: approver.name,
                icon: () => <img src={approver.profilePicture} alt={approver.name} />
            }))
            .sort((a, b) => a.label.localeCompare(b.label)),
        [entityApprovers]
    );

    useEffect(() => {
        if (assignees && assignees.length > 0) {
            const initialSelects = assignees.map((assignee) =>
                typeof assignee === 'string' ? approverOptions.find(option => option.value === assignee) || null : null
            );
    
            setSelects((prevSelects) => {
                // This is needed to avoid unnecessary re-renders which can cause warning of a child component being re-rendered while parent is in the midle of also re-rendering.
                const areEqual = initialSelects.length === prevSelects.length && initialSelects.every((option, idx) => option?.value === prevSelects[idx]?.value);
                
                if (!areEqual) {
                    return initialSelects;
                }
                return prevSelects;
            });
        } 
    }, [assignees, approverOptions]);

    const selectedValues = useMemo(() => 
        selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
        [selects]
    );

    const availableApproverOptions = useMemo(() => 
        approverOptions.filter(opt => !selectedValues.includes(opt.value)),
        [approverOptions, selectedValues]
    );

    const handleAddSelectComponent = () => {
        setIsAdding(true); // I hate to use flags... but it was the only way i was able to prevent onSelectChange to cause parent component from re-rendering in the midle of EditableWorkflowStep rerender.
        setSelects(prev => [...prev, null]);
    };

    useEffect(() => {
        if (isAdding) {
            onSelectChange(selects.length, selects.length - 1, null);
            setIsAdding(false); 
        }
    }, [selects.length, isAdding, onSelectChange]);

    const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
        const updated = [...selects];
        updated[index] = option;
        setSelects(updated);
        onSelectChange(numberOfSelects, index, option);
    };

    return (
        <div className="flex w-full">
            <div className="flex flex-col items-center">
                <WorkflowStepNumber stepNumber={stepNumber} completed={false} selected={false}  />

                {/* Vertical Bar connecting steps */}
                {!finalStep && (
                    <div className="w-1 h-full min-h-10 bg-mti-purple-dark"></div>
                )}
            </div>

            {stepNumber !== 1 && !finalStep && !isCompleted
                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing min-w-[25px] min-h-[25px]" />
                : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
            }

            <div className="ml-10 mb-12">
                <WorkflowStepSelects
                    approvers={availableApproverOptions}
                    selects={selects}
                    placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
                    onSelectChange={handleSelectChangeAt}
                    isCompleted={isCompleted}
                />
            </div>

            <div className="flex flex-row items-start mt-1.5 ml-3">
                <button
                    type="button"
                    onClick={handleAddSelectComponent}
                    className="cursor-pointer"
                >
                    <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
                </button>
                {stepNumber !== 1 && !finalStep && (
                    <button
                        className="cursor-pointer"
                        onClick={onDelete}
                        type="button"
                    >
                        <BsTrash className="size-6 mt-0.5 ml-3 hover:text-mti-purple-light transition ease-in-out duration-300" />
                    </button>
                )}
            </div>
        </div>

    );
};