import {useModuleStore} from "@/lib/store/useModuleStore";
import {LstCard} from "../extendedUI/LstCard";
import {CardHeader} from "../ui/card";
import {Tabs, TabsContent, TabsList, TabsTrigger} from "../ui/tabs";
import {useSessionStore} from "@/lib/store/sessionStore";

export default function KFP() {
    const {modules} = useModuleStore();
    const {user} = useSessionStore();
    const eomMod = modules.filter((m) => m.name === "eom");
    // the users current role for eom is?
    const role: any = user?.roles.filter((r) => r.module_id === eomMod[0].module_id) || "";
    const tabs = [
        {key: "mat", label: "Materials", roles: ["admin", "systemAdmin"], content: <Materials />},
        {key: "sbm", label: "Stretch Blow", roles: ["admin", "systemAdmin"]},
    ];
    return (
        <div className="flex flex-row w-full">
            <Tabs defaultValue="mat">
                <TabsList>
                    {tabs.map((tab) => {
                        if (tab.roles.includes(role[0].role))
                            return <TabsTrigger value={tab.key}>{tab.label}</TabsTrigger>;
                    })}
                </TabsList>
                {tabs.map((tab) => {
                    if (tab.roles.includes(role[0].role))
                        return (
                            <TabsContent value={tab.key} className="w-screen">
                                {tab.content}
                            </TabsContent>
                        );
                })}
            </Tabs>
        </div>
    );
}

function Materials() {
    return (
        <div className="flex flex-row w-[90%]">
            <div className="w-1/5">
                <LstCard className="m-1">
                    <CardHeader>Resin</CardHeader>
                </LstCard>
                <LstCard className="m-1">
                    <CardHeader>MasterBatch</CardHeader>
                </LstCard>
                <LstCard className="m-1">
                    <CardHeader>Additive</CardHeader>
                </LstCard>
                <LstCard className="m-1">
                    <CardHeader>Dose cups / Spigots / Spouts</CardHeader>
                </LstCard>
            </div>
            <div className="w-1/2">
                <LstCard className="m-1">
                    <CardHeader>Pre-Emis Material Consistency report</CardHeader>
                </LstCard>
            </div>
            <div className="w-1/6">
                <LstCard className="m-1">
                    <CardHeader>Regrind Report in kg</CardHeader>
                </LstCard>
            </div>
        </div>
    );
}