import Layout from "@/components/High/Layout";
import useUser from "@/hooks/useUser";
import { ApprovalWorkflow, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
import { sessionOptions } from "@/lib/session";
import { redirect, serialize } from "@/utils";
import { requestUser } from "@/utils/api";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import { withIronSessionSsr } from "iron-session/next";
import Head from "next/head";
import Link from "next/link";
import { BsChevronLeft } from "react-icons/bs";
import { ToastContainer } from "react-toastify";

import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally

import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
import Status from "@/components/ApprovalWorkflows/Status";
import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
import { useState } from "react";
import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
import { User } from "@/interfaces/user";
import { getSpecificUsers, getUser, getUsers } from "@/utils/users.be";

export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
    const user = await requestUser(req, res);
    if (!user) return redirect("/login")

    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
        return redirect("/")

    const { id } = params as { id: string };

    // replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;

    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);

    if (!workflow)
        return redirect("/approval-workflows")

    const allAssigneeIds: string[] = [
        ...new Set(
            workflow.steps
                .map(step => step.assignees) 
                .flat() as string[] // we are sure assignees coming from a db workflow are all valid strings.
        )
    ];

    return {
        props: serialize({
            user,
            workflow,
            workflowAssignees: await getSpecificUsers(allAssigneeIds),
            workflowRequester: await getUser(workflow.requester),
        }),
    };
}, sessionOptions);

interface Props {
    user: User,
    workflow: ApprovalWorkflow,
    workflowAssignees: User[],
    workflowRequester: User,
}

export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
    const steps = workflow.steps;

    const [selectedIndex, setSelectedIndex] = useState(steps.length - 1);

    const handleStepClick = (index: number) => {
        setSelectedIndex(index);
    };

    return (
        <>
            <Head>
                <title> {workflow.name} | EnCoach</title>
                <meta
                    name="description"
                    content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
                />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <ToastContainer />
            {user && (
                <Layout user={user} className="gap-6">
                    <section className="flex flex-col gap-0">
                        <div className="flex items-center gap-2">
                            <Link
                                href="/approval-workflows"
                                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
                                <BsChevronLeft />
                            </Link>
                            <h1 className="text-2xl font-semibold">{workflow.name}</h1>
                        </div>
                    </section>
                    <section className="flex flex-col gap-6">
                        <div className="flex flex-row gap-6">
                            <RequestedBy
                                prefix={getUserTypeLabelShort(workflowRequester.type)}
                                name={workflowRequester.name}
                                profileImage="/blue-stock-photo.png" //{workflowRequester.profilePicture}
                            />
                            <StartedOn
                                date={workflow.startDate}
                            />
                            <Status
                                status={workflow.status}
                            />
                        </div>
                    </section>
                    <section className="flex flex-col gap-0">
                        {steps.map((step, index) => (
                            <WorkflowStepComponent
                                workflowAssignees={workflowAssignees}
                                key={index}
                                completed={step.completed}
                                completedBy={step.completedBy}
                                stepNumber={step.stepNumber}
                                stepType={step.stepType}
                                assignees={step.assignees}
                                assigneesType={step.assigneesType}
                                finalStep={index === steps.length - 1}
                                currentStep={steps.findIndex(step => !step.completed) === index}
                                selected={index === selectedIndex}
                                onClick={() => handleStepClick(index)}
                            />
                        ))}
                    </section>
                </Layout>
            )}
        </>
    );
}
