import React, { useContext } from 'react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { GraduationCap, Grid3x3, Headset, UserRoundCog, UserSearch, Warehouse } from "lucide-react";
import Link from 'next/link';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { AuthContext } from '@/helpers/context/AuthProvider';

const apps = [
    { icon: UserRoundCog, name: 'PIMS', color: 'text-red-600' , link : `${process.env.NEXT_PUBLIC_HRMS_FRONTEND}`},
    { icon: Warehouse, name: 'Asset', color: 'text-orange-600' , link : `${process.env.NEXT_PUBLIC_HRMS_FRONTEND}`},
    { icon: Headset, name: 'CRMS', color: 'text-blue-500' , link : `${process.env.NEXT_PUBLIC_CRM_FRONTEND}`},
    { icon: GraduationCap, name: 'TMS', color: 'text-yellow-500' , link : `${process.env.NEXT_PUBLIC_TMS_FRONTEND}`},
    { icon: UserSearch, name: 'Job Board', color: 'text-green-500' , link : `${process.env.NEXT_PUBLIC_EMPLOYEE_FRONTEND}`},
];

const ApplicationSwitch : React.FC = () => {

    const { user } = useContext(AuthContext)    
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    variant="outline"
                    className="relative h-8 w-8 rounded-full"
                >
                    <Grid3x3 className="w-[1.2rem] h-[1.2rem]"/>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-60 p-2">
                <div className="grid grid-cols-3 gap-4 p-2">
                    <DropdownMenuItem>
                        <Link href={`${process.env.IDP_FRONTEND}`} className=''>
                            <Avatar className="h-8 w-8">
                            {
                                user?.pfpName ? 
                                <AvatarImage src={user?.pfpName} alt={user.firstName} /> : 
                                <AvatarFallback className="bg-transparent">uk</AvatarFallback>
                            }
                            </Avatar>
                            <span>Profile</span>
                        </Link>
                    </DropdownMenuItem>
                {apps.map((app) => (
                    <DropdownMenuItem
                    key={app.name}
                    className="flex flex-col items-center justify-center p-2 focus:bg-accent cursor-pointer"
                    >
                        <Link href={app.link} className={`hover:text-${app.color}`}>
                            <app.icon className={`h-6 w-6 mb-1 ${app.color}`} />
                            <span className="text-xs">{app.name}</span>
                        </Link>
                    </DropdownMenuItem>
                ))}
                </div>
            </DropdownMenuContent>
        </DropdownMenu>
    );
};

export default ApplicationSwitch;