import { getUserTypeLabel, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
import WorkflowStepNumber from "./WorkflowStepNumber";
import clsx from "clsx";
import { RiThumbUpLine } from "react-icons/ri";
import { FaWpforms } from "react-icons/fa6";
import { User } from "@/interfaces/user";
import UserWithProfilePic from "./UserWithProfilePic";

interface Props extends WorkflowStep {
    workflowAssignees: User[],
    currentStep: boolean,
}

export default function WorkflowStepComponent({
    workflowAssignees,
    currentStep,
    stepType,
    stepNumber,
    completed,
    rejected = false,
    completedBy,
    assignees,
    finalStep,
    selected = false,
    onClick,
}: Props) {

    const completedByUser = workflowAssignees.find((assignee) => assignee.id === completedBy);
    const assigneesUsers = workflowAssignees.filter(user => assignees.includes(user.id));

    return (
        <div
            onClick={onClick}
            className={clsx("flex flex-row gap-5 w-[600px] p-6 mb-5 rounded-2xl transition ease-in-out duration-300 cursor-pointer", {
                "bg-mti-red-ultralight": rejected && selected,
                "bg-mti-purple-ultralight": selected,
            })}
        >
            <div className="relative flex flex-col items-center">
                <WorkflowStepNumber stepNumber={stepNumber} selected={selected} completed={completed} finalStep={finalStep} rejected={rejected} />

                {/* Vertical Bar connecting steps */}
                {!finalStep && (
                    <div className="absolute w-1 bg-mti-purple-dark -bottom-20 top-11"></div>
                )}
            </div>

            <div className="mt-1.5">
                {stepType === "approval-by" ? (
                    <RiThumbUpLine size={25} />
                ) : (
                    <FaWpforms size={25} />
                )
                }
            </div>

            <div className="mt-1 flex flex-col gap-0">
                {completed && completedBy && rejected ? (
                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval: ${getUserTypeLabel(completedByUser!.type)} Approval` : `Form Intake: ${getUserTypeLabel(completedByUser!.type)} Intake`} </p>
                        <UserWithProfilePic
                            prefix={`Rejected by: ${getUserTypeLabelShort(completedByUser!.type)}`}
                            name={completedByUser!.name}
                            profileImage={completedByUser!.profilePicture}
                        />
                    </div>
                ) : completed && completedBy && !rejected ? (
                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval: ${getUserTypeLabel(completedByUser!.type)} Approval` : `Form Intake: ${getUserTypeLabel(completedByUser!.type)} Intake`} </p>
                        <UserWithProfilePic
                            prefix={`Completed by: ${getUserTypeLabelShort(completedByUser!.type)}`}
                            name={completedByUser!.name}
                            profileImage={completedByUser!.profilePicture}
                        />
                    </div>
                ) : !completed && currentStep ? (
                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval:` : `Form Intake:`} </p>
                        In Progress... Assignees:
                        <div className="flex flex-row flex-wrap gap-3 items-center">
                            {assigneesUsers.map(user => (
                                <span key={user.id}>
                                    <UserWithProfilePic
                                        prefix={getUserTypeLabelShort(user.type)}
                                        name={user.name}
                                        profileImage={user.profilePicture}
                                    />
                                </span>
                            ))}
                        </div>
                    </div>
                ) : (
                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval:` : `Form Intake:`} </p>
                        Waiting for previous steps...
                    </div>
                )}
            </div>
        </div>
    );
};