import Head from 'next/head'
import Image from 'next/image';
import React from 'react';
import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh, FaAngleDown, FaPlusSquare, FaBroom } from "react-icons/fa";
import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
import { BsThreeDots } from "react-icons/bs";

import { UserStatus, User } from '../../models/user'
import { KeyCode } from '../../globals/keycode'

let testFriends = [ 
    {
        name: "Liam",
        role: "engineer",
        systemAvatar: "01",
        status: UserStatus.online
    },
    {
        name: "Emily",
        role: "engineer",
        systemAvatar: "02",
        status: UserStatus.online
    },
    {
        name: "Paul",
        role: "architect",
        systemAvatar: "03",
        status: UserStatus.online
    },
    {
        name: "Mark",
        role: "engineer",
        systemAvatar: "04",
        status: UserStatus.busy
    },
    {
        name: "Adriana",
        role: "design",
        systemAvatar: "05",
        status: UserStatus.busy
    },
    {
        name: "Josh",
        role: "design",
        systemAvatar: "06",
        status: UserStatus.offline
    }
]

export default class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedChannel: null
        }

        this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this);
    }

    componentDidMount(): void {
        document.addEventListener("keydown", this.handleKeyboardShortcut)
    }

    componentWillUnmount(): void {
        document.removeEventListener("keydown", this.handleKeyboardShortcut);
    }

    statusBubble(status: UserStatus) {
        console.log(status)

        switch(status) {
            case UserStatus.online:
                return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
            case UserStatus.busy:
                return <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
            case UserStatus.offline:
                return <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
            default:
                return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
        }
    }

    renderPulse(status: UserStatus) {
        switch(status) {
            case UserStatus.online:
                return <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2" />
            case UserStatus.busy:
                return <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2" />
            case UserStatus.offline:
                return <IoRemoveOutline className="text-gray-400 text-2xl mx-2" />
            default:
                return <IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2" />
        }
    }

    handleKeyboardShortcut(event) {    
        console.log(event.keyCode)

        switch(event.keyCode) {
            case KeyCode.Zero:
                this.setState({
                    selectedChannel: 0
                });
                break 
            case KeyCode.One:
                this.setState({
                    selectedChannel: 1
                });
                break 
            case KeyCode.Two:
                this.setState({
                    selectedChannel: 2
                });
                break 
            case KeyCode.Three:
                this.setState({
                    selectedChannel: 3
                });
                break 
            case KeyCode.Four:
                this.setState({
                    selectedChannel: 4
                });
                break
            case KeyCode.Five:
                this.setState({
                    selectedChannel: 5
                });
                break
            default:
                return
        }
    }

    render() {
        return (
            <>
                <div className="container mx-auto max-w-screen-xl pt-10 flex flex-col space-y-5 ">
                    <Head>
                        <link
                        href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
                        rel="stylesheet"
                        />
            
                        <link
                        href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap"
                        rel="stylesheet"
                        />
                    </Head>
                    
                    {/* header content */}
                    <section className="flex-1 flex flex-row items-center justify-between py-5">
                        {/* welcome message */}
                        <span className='flex flex-col'>
                            <span className="font-sans font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>
                            <span className="font-sans text-md text-gray-300">you collabed <span className="text-green-500">1.5 hours</span> and worked <span className="text-orange-500">2 hours</span> yesterday</span>
                        </span>
                        
                        {/* avatar */}
                        <span className="flex flex-row items-center space-x-5">
                            <FaHeadphonesAlt className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
                            <FaMicrophoneAlt className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
                            <FaTh className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
                            <span className='relative flex'>
                                <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
                                <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
                                <Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg" alt="profile" width={50} height={50} />
                            </span>
                        </span>
                    </section>
                    
                    <div className='flex flex-row items-baseline space-x-5'>
                        {/* personal line */}
                        <section className='flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                            <span className='p-5 flex flex-col'>
                                <span className="text-white">TEAM</span>
                                <span className="font-sans text-sm text-white pt-2">
                                    <span className="rounded-full p-1 bg-opacity-30 bg-white text-white font-bold">3</span> teammates open for collab
                                </span>
                            </span>
                            
                            {/* list of team members */}
                            {
                                testFriends.map((friend, i) => {
                                    return (
                                        <span key={i} className={"flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 " + (this.state.selectedChannel == i ? "bg-gray-300 scale-105 shadow-2xl" : " ")}>
                                            <span className='relative flex mr-2'>
                                                <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
                                                
                                                {this.statusBubble(friend.status)}

                                                <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (friend.systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
                                            </span>
                        
                                            <span className='flex flex-col'>
                                                <span className="text-sm text-white font-bold">{friend.name} </span>
                        
                                                <span className={"text-xs span-sans text-gray-300" + (this.state.selectedChannel == i ? "text-black" : " ")}>{friend.role}</span>
                                            </span>                                        
                                            
                                            {
                                                this.state.selectedChannel == i ? 
                                                <>
                                                    <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center">
                                                        <span className="text-white text-sm">{i}</span>
                                                    </span>
                                                </>
                                                
                                                :
                                                <span className="rounded-lg p-2 ml-auto border border-gray-100 shadow-md w-10 h-10 text-center">
                                                    <span className="text-gray-200 text-sm">{i}</span>
                                                </span>
                                            }

                                            {this.renderPulse(friend.status)}
                                        </span>
                                    )
                                })
                            }
                        </section>
            
                        <div className='flex flex-1 flex-col space-y-5 items-baseline'>
                            {/* announcements */}
                            <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                                <span className='flex flex-row justify-end space-x-2 pb-5'>
                                    <span className="text-white mr-auto">ANNOUNCEMENTS</span>

                                    

                                    <span className='text-sm text-gray-300 flex flex-row items-center'>
                                        TODAY <FaAngleDown />
                                    </span>
                                </span>
                
                                <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5">
                                            <span className='relative mr-2 grid items-center justify-items-center p-4'>
                                                <span className="bg-white bg-opacity-50 rounded-full shadow-md absolute w-full h-full"></span>
                                                <FaMicrophoneAlt className='text-xl text-white' />
                                            </span>
                                    {
                                         testFriends.map((friend, i) => {
                                            return (
                                            <span key={i} className='relative mr-2 grid items-center justify-items-center'>
                                                <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
                                                
                                                {this.statusBubble(friend.status)}

                                                <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (friend.systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
                                            </span>
                                            )
                                         })
                                    }
                                </div>
                            </section>

                            {/* rooms */}
                            <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                                <span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
                                    <span className="text-white mr-auto">ROOMS</span>

                                    <FaBroom className='text-xl text-white' />

                                    <button className='bg-transparent hover:bg-white-500 text-white font-semibold hover:text-white py-1 px-4 border border-white-500 hover:border-transparent rounded'>
                                            Create
                                        </button>

                                    <BsThreeDots className='text-xl text-white' />
                                </span>
                
                                {/* all rooms */}
                                <span className='flex flex-row space-x-2'>

                                    {/* bugs room */}
                                    <span className='flex flex-col bg-white bg-opacity-60 p-5 rounded-lg'>
                                        <span className='flex flex-row justify-between items-center space-x-1'>
 
                                            <span className='flex flex-row pr-10'>
                                                <span className="inline-flex flex-row-reverse items-center">
                                                    <span className=''>
                                                        <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"} alt="profile" width={30} height={30} />
                                                    </span>
                                                    <span className='-mr-4'>
                                                        <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"} alt="profile" width={30} height={30} />
                                                    </span>
                                                </span>
                                                

                                                <span className='flex flex-col items-baseline'>
                                                    <span className='font-bold text-black mr-auto'>Bugs</span>
                                                    <span className='text-xs text-gray-400'>started 5 minutes ago</span>
                                                </span>
                                                
                                            </span>
                                            

                                            <button className='ml-auto bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-1 px-4 border border-green-500 hover:border-transparent rounded'>
                                                Join
                                            </button>
                                        </span>
                                        
                                    </span>
                                </span>
                            </section>
                        </div>
                        
                    </div>
                    
                </div>
                
                <div className='fixed bottom-10 w-full'>
                    {/* dynamic footer based on selection */}
                    <section className={"flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between ease-in-out duration-300 scale-0" + (this.state.selectedChannel != null ? "scale-100" : " ")}>
                        <span className='flex flex-row'>
                            <span className='relative flex mr-2'>
                                <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
                                
                                {this.statusBubble(UserStatus.online)}

                                <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
                            </span>
        
                            <span className='flex flex-col'>
                                <span className="text-sm text-black font-bold">{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].name} </span>
        
                                <span className={"text-xs font-sans text-gray-300 text-black"}>{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role}</span>
                            </span> 
                        </span>

                        {/* shortcuts */}
                        <span className='flex flex-row space-x-3'>
                            <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center animate-pulse">
                                <span className="text-white text-sm font-bold">R</span>
                            </span>
                            <span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-20 h-10 text-center animate-pulse">
                                <span className="text-white text-sm font-bold">SPACE</span>
                            </span>
                        </span>
                    </section>
                </div>
                
            </>
            )
    }
    
}