import Head from 'next/head'
import Image from 'next/image';
import React from 'react';
import { FaMicrophoneAlt, 
    FaHeadphonesAlt, 
    FaTh, 
    FaAngleDown, 
    FaPlusSquare, 
    FaBroom, 
    FaBell, 
    FaFilePdf,
    FaCopy, 
    FaClock,
    FaPlay,
    FaPlus,
    FaCheck,
    FaCode,
    FaLink,
    FaExternalLinkAlt,
    FaArchive,
    FaAtlassian,
    FaSearch

} from "react-icons/fa";
import { IoPulseOutline, IoRemoveOutline, IoTimer } from "react-icons/io5";
import { BsThreeDots } from "react-icons/bs";

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

import BackgroundLayout from '../../components/Layouts/BackgroundLayout'

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

function getUser(name: string) : User {
    return new User()
}

type MyState = {
    selectedChannel?: number
};


export default class Demo extends React.Component<{ }, MyState> {
    state: MyState = {
        selectedChannel: null
    }

    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 ml-auto" />
            case UserStatus.busy:
                return <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
            case UserStatus.offline:
                return <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
            default:
                return <IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2 ml-auto" />
        }
    }

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

        switch(event.keyCode) {
            case KeyCode.Escape:
                this.setState({
                    selectedChannel: null
                })
                break
            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 (
            <BackgroundLayout>
                <div className="container mx-auto max-w-screen-xl py-10 flex flex-col space-y-5">
                    {/* header content */}
                    <section className="flex-1 flex flex-row items-center justify-between py-5">
                        {/* welcome message */}
                        <span className='flex flex-col items-baseline'>
                            <span className="font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>                            

                            {/* Date and time */}
                            <span className='flex flex-row space-x-2'>
                                <span className='text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2'>Tues, Jan 11th</span>
                                <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold mt-2'>1:34am</span>
                            </span>                            
                        </span>
                        
                        {/* avatar */}
                        <span className="flex flex-row items-center space-x-5">
                            {/* search bar */}
                            <div className="pt-2 flex flex-row relative items-center">
                                <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
                                    <FaSearch className='text-white' />
                                </button>

                                <input className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
                                type="search" name="search" placeholder="Search" />

                                <button className="absolute right-1 rounded-lg py-1 px-2 ml-1 
                                            shadow-md text-center text-white text-sm font-bold">
                                    CTRL + K
                                </button>
                            </div>

                            <FaBell className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
                            <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' />
                            
                            {/* avatar */}
                            <span className='relative flex'>
                                <span className="bg-gray-200 bg-opacity-30 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-22.svg" alt="profile" width={50} height={50} />
                            </span>
                        </span>
                    </section>
                    
                    <div className='flex flex-row items-baseline space-x-5 space-y-5 flex-wrap'>
                        {/* personal line */}
                        <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                            <span className='flex flex-row justify-start items-center pb-5'>
                                <span className='flex flex-col'>
                                    <span className="text-white">TEAM</span>
                                </span>

                                <button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
                                    <FaPlus className='text-lg text-white' />
                                </button>
                            </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-white bg-opacity-80 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 mr-10'>
                                                <span className='flex flex-row items-center space-x-2'>
                                                    <span className="text-sm text-white font-bold">{friend.name} </span>
                                                    {
                                                        this.state.selectedChannel == i ? 
                                                        <>
                                                            <button className="rounded-lg bg-gray-400 shadow-lg text-center 
                                                            text-white text-sm py-1 px-2 font-bold">
                                                                {i}
                                                            </button>
                                                        </>
                                                        
                                                        :
                                                        <button className="rounded-lg border py-1 px-2 border-gray-100 shadow-md 
                                                        text-center text-gray-200 text-smf font-bold">
                                                            {i}
                                                        </button>
                                                    }
                                                </span>


                                                <span className={"text-xs span-sans text-gray-300" + (this.state.selectedChannel == i ? "text-black" : " ")}>{friend.role}</span>
                                            </span>

                                            {this.renderPulse(friend.status)}
                                        </span>
                                    )
                                })
                            }	
                        </section>
												
                        <div className='flex-1 flex flex-col space-y-5 items-baseline'>
                            {/* pinned */}
                            <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                                <span className='flex flex-row justify-start items-center pb-5'>
                                    <span className='flex flex-col mr-20'>
                                        <span className="text-white mr-auto">ANNOUNCEMENTS  
                                        <button className="right-1 rounded-lg py-1 px-2 ml-1 
                                            shadow-md text-center text-white text-sm font-bold">
                                            CTRL + A
                                        </button>
                                        </span>
                                        <span className='text-gray-300 text-xs'>updates, pep talks, blockers, reminders</span>
                                    </span>
                                    
                                    {/* tab pane */}
                                    <span className='ml-auto flex flex-row space-x-5 uppercase mr-5'>
                                        <span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>Active</span>

                                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Resolved</span>
                                    </span>

                                    <span className='text-sm text-gray-300 flex flex-row items-center'>
                                        TODAY <FaAngleDown />
                                    </span>

                                    <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                        <FaMicrophoneAlt className='text-lg text-white' />
                                    </button>
                                    <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                        <FaPlay className='text-lg text-white' />
                                    </button>
                                </span>
                
                                <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
                                    {/* adriana's announcement */}
                                    <span className='flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center'>
                                        <span className='relative mr-2 grid items-center justify-items-center'>
                                            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
                                            
                                            {this.statusBubble(UserStatus.busy)}

                                            <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={50} height={50} />
                                        </span>

                                        <span className='flex flex-col items-baseline'>
                                            <span className='text-md font-bold text-white'>Adriana</span>
                                            <span className='text-xs text-gray-200'>5 minutes ago</span>
                                            <span className='text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
                                                <span>blockers</span>
                                            </span>
                                        </span>
                                    </span>

                                    {/* arjun's announcement */}
                                    <span className='flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center'>
                                        <span className='relative mr-2 grid items-center justify-items-center'>
                                            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
                                            
                                            {this.statusBubble(UserStatus.busy)}

                                            <Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"} alt="profile" width={50} height={50} />
                                        </span>

                                        <span className='flex flex-col items-baseline mr-5'>
                                            <span className='text-md font-bold text-white'>Arjun</span>
                                            <span className='text-xs text-gray-200'>30 minutes ago</span>
                                            <span className='text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
                                                <span>engineering</span>
                                            </span>
                                        </span>

                                        <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                            <FaCheck className='text-lg text-white' />
                                        </button>
                                    </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-3 pb-5 items-center'>
                                    <span className="text-white mr-auto">ROOMS  
                                        <button className="right-1 rounded-lg py-1 px-2 ml-1 
                                            shadow-md text-center text-white text-sm font-bold">
                                            CTRL + R
                                        </button>
                                    </span>
                                    
                                    {/* tab pane */}
                                    <span className='flex flex-row space-x-5 uppercase mr-5'>
                                        <span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>All</span>

                                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Live</span>

                                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Scheduled</span>

                                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Recurring</span>
                                    </span>

                                    <span className='text-sm text-gray-300 flex flex-row items-center uppercase'>
                                        Week <FaAngleDown />
                                    </span>

                                    <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
                                        <FaPlus className='text-lg text-white' />
                                    </button>

                                    <BsThreeDots className='text-xl text-white' />
                                </span>
                
                                {/* all rooms */}
                                <span className='flex flex-row flex-wrap'>
                                    {/* spontaneous bugs room */}
                                    <span className='flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
                                        {/* header */}
                                        <span className='flex flex-1 flex-row justify-between items-baseline space-x-1 p-5'>
                                            {/* meeting details */}
                                            <span className='flex flex-col items-baseline max-w-xs pr-10'>
                                                <span className='text-gray-500 font-semibold mr-auto'>bug fixing</span>
                                                <span className='text-xs text-gray-400 overflow-wrap'>were just fixing that jsx bug thats a paiiinnnn</span>                                                    
                                                
                                                {/* badges and tags */}
                                                <span className='flex flex-row flex-wrap'>                                                    
                                                    <span className='text-xs m-1 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row items-center'>                                                       
                                                        <span>blockers</span>
                                                    </span>

                                                    <span className='text-xs m-1 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row items-center'>                                                       
                                                        <span>engineering</span>
                                                    </span>
                                                </span>
                                            </span>

                                            {/* room status */}
                                            <span className='flex flex-col items-end space-y-1 justify-between h-full'>
                                                <span className='text-xs bg-red-500
                                                text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center'>
                                                    <FaClock /> 
                                                    <span>live</span>
                                                </span>                    

                                                {/* room attachments */}
                                                <span className='flex flex-row space-x-2'>
                                                    <button className='bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
                                                        <FaLink className='text-sm text-gray-400' />
                                                    </button>

                                                    <button className='bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
                                                        <FaLink className='text-sm text-gray-400' />
                                                    </button>
                                                </span>
                                            </span>
                                                
                                        </span>

                                        {/* footer */}
                                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
                                            <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
                                                <span className='relative flex'>
                                                    <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
                                                    <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"} alt="profile" width={30} height={30} />
                                                </span>
                                                <span className='-mr-4 relative flex'>
                                                <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
                                                    <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"} alt="profile" width={30} height={30} />
                                                </span>
                                            </span>

                                            <span className='text-xs text-gray-400'>Arjun and Liam</span>                                            

                                            <button className='ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded'>👋 Leave</button>

                                            <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        </span>
                                        </span>

                                    {/* live room - design meeting */}
                                    <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
                                        {/* header */}
                                        <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
                                            {/* meeting details */}
                                            <span className='flex flex-col items-baseline max-w-xs pr-20'>
                                                <span className='text-white font-semibold mr-auto'>Shopping Cart Experience</span>
                                                <span className='text-xs text-gray-200 overflow-wrap'>lets finish the mockups @josh, @mark, and @arjun please step in for feedback</span>                                                    
                                                
                                                {/* badges and tags */}
                                                <span className='flex flex-row flex-wrap space-x-2'>
                                                    <span className='text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
                                                        <span>design</span>
                                                    </span>
                                                </span>
                                            </span>

                                            {/* room status */}
                                            <span className='flex flex-col items-end justify-between h-full'>
                                                <span className='text-xs bg-red-500
                                                text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center'>
                                                    <FaClock /> 
                                                    <span>live</span>
                                                </span>
                                                <span className='text-gray-200 text-xs text-right mb-auto'>on and off all day</span>

                                                {/* room attachments */}
                                                <span className='flex flex-row space-x-2'>
                                                    <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
                                                        <FaLink className='text-sm text-white' />
                                                    </button>

                                                    <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
                                                        <FaLink className='text-sm text-white' />
                                                    </button>
                                                </span>
                                            </span>
                                        </span>

                                        {/* footer */}
                                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
                                            <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
                                                <span className='relative flex'>
                                                    <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
                                                    <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={30} height={30} />
                                                </span>
                                            </span>

                                            <span className='text-xs text-white'>Adriana</span>

                                            <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
                                                Join
                                            </button>

                                            <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        
                                        </span>
                                    </span>
                                    
                                    {/* scheduled room - one on one */}
                                    <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
                                        {/* header */}
                                        <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
                                            {/* meeting details */}
                                            <span className='flex flex-col items-baseline max-w-xs pr-20'>
                                                <span className='text-white font-semibold mr-auto'>Arjun and Paul - One on one</span>
                                                <span className='text-xs text-gray-200 overflow-wrap'>performance review</span>                                                    
                                                
                                                {/* badges and tags */}
                                                <span className='flex flex-row flex-wrap space-x-2'>
                                                    <span className='text-xs my-3 text-white bg-gray-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
                                                        <span>private</span>
                                                    </span>
                                                </span>
                                            </span>

                                            {/* room status */}
                                            <span className='flex flex-col items-end'>
                                                <span className='text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
                                                    <FaClock />
                                                    <span>scheduled</span>
                                                </span>

                                                <span className='text-gray-200 text-xs text-center'>3ish? Ill ping you Arjun</span>
                                            </span>
                                        </span>

                                        {/* footer */}
                                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
                                            <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
                                                Join
                                            </button>

                                            <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        </span>
                                        </span>

                                    {/* recurring room - dsu */}
                                    <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
                                        {/* header */}
                                        <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
                                            {/* meeting details */}
                                            <span className='flex flex-col items-baseline max-w-xs pr-20'>
                                                <span className='text-white font-semibold mr-auto'>
                                                    Daily Standup
                                                </span>
                                                <span className='text-xs text-gray-200 overflow-wrap'></span>                                                    
                                                
                                                {/* badges and tags */}
                                                <span className='flex flex-row flex-wrap space-x-2'>
                                                    <span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
                                                        <span>scrum</span>
                                                    </span>

                                                    <span className='text-xs my-3 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
                                                        <span>engineering</span>
                                                    </span>
                                                </span>
                                            </span>

                                            {/* room status */}
                                            <span className='flex flex-col items-center justify-start'>
                                                <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
                                                    <IoTimer />
                                                    <span>recurring</span>
                                                </span>

                                                <span className='text-gray-200 text-xs'>10am daily</span>
                                            </span>
                                        </span>

                                        {/* footer */}
                                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>

                                            <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
                                                Join
                                            </button>

                                            <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                                <FaBell className='text-sm text-orange-500' />
                                            </button>

                                            <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        </span>
                                        </span>

                                    {/* recurring  room - demo */}
                                    <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
                                        {/* header */}
                                        <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
                                            {/* meeting details */}
                                            <span className='flex flex-col items-baseline max-w-xs pr-20'>
                                                <span className='text-white font-semibold mr-auto'>
                                                    Sprint Demo
                                                </span>
                                                <span className='text-xs text-gray-200 overflow-wrap'>all hands on deck...lets have fun :)</span>                                                    
                                                
                                                {/* badges and tags */}
                                                <span className='flex flex-row flex-wrap space-x-2'>
                                                    <span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
                                                        <span>scrum</span>
                                                    </span>
                                                </span>
                                            </span>

                                            {/* room status */}
                                            <span className='flex flex-col items-center justify-start'>
                                                <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
                                                    <IoTimer />
                                                    <span>recurring</span>
                                                </span>

                                                <span className='text-gray-200 text-xs text-center'>biweekly fridays!</span>
                                            </span>
                                        </span>

                                        {/* footer */}
                                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>

                                        <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
                                                Join
                                            </button>

                                            <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                                <FaBell className='text-sm text-orange-500' />
                                            </button>

                                            <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        </span>
                                        </span>

                                    {/* recurring room - wine wednesdays */}
                                    <span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
                                        {/* header */}
                                        <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
                                            {/* meeting details */}
                                            <span className='flex flex-col items-baseline max-w-xs pr-20'>
                                                <span className='text-white font-semibold mr-auto'>
                                                    Wine Wednesdays
                                                </span>
                                                <span className='text-xs text-gray-200 overflow-wrap'>@JOSH YOU BETTER COME</span>                                                    
                                                
                                                {/* badges and tags */}
                                                <span className='flex flex-row flex-wrap space-x-2'>
                                                    <span className='text-xs my-3 text-white bg-lime-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>                                                       
                                                        <span>party 🎉</span>
                                                    </span>
                                                </span>
                                            </span>

                                            {/* room status */}
                                            <span className='flex flex-col items-end'>
                                                <span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
                                                    <IoTimer />
                                                    <span>recurring</span>
                                                </span>

                                                <span className='text-gray-200 text-xs text-right'>wednesdays 7-9pm</span>
                                            </span>
                                        </span>

                                        {/* footer */}
                                        <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>

                                            <button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
                                                Join
                                            </button>

                                            <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                                <FaBell className='text-sm text-orange-500' />
                                            </button>

                                            <BsThreeDots className='text-white ml-2 hover:cursor-pointer' />                                        
                                        </span>
                                    </span>
                                </span>
                            </section>
                        </div>
                    </div>

                    {/* attachments */}
                    <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                        {/* header row */}
                        <span className='flex flex-row justify-start pb-5 items-center'>
                            <span className='flex flex-col mr-20'>
                                <span className="text-white mr-auto">Attachments
                                    <button className="rounded-lg border py-1 px-2 ml-1 border-gray-100 
                                    shadow-md text-center text-gray-200 text-sm font-bold">
                                        T
                                    </button>
                                    <button className="rounded-lg border py-1 px-2 ml-1 border-gray-100 
                                    shadow-md text-center text-gray-200 text-sm font-bold">
                                        CTRL + V
                                    </button>
                                </span>
                                <span className='text-gray-300 text-xs'>code, links (jira tickets, drive folders, powerpoints), screenshots</span>
                            </span>

                            {/* tab pane */}
                            <span className='ml-auto flex flex-row space-x-5 uppercase mr-5'>
                                <span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>Team</span>

                                <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Personal</span>

                                <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Favorites</span>
                            </span>

                            <span className='text-sm mr-5 text-gray-300 flex flex-row items-center'>
                                TODAY <FaAngleDown />
                            </span>

                            <button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
                                <FaCode className='text-lg text-white' />
                            </button>

                            <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                <FaLink className='text-lg text-white' />
                            </button>

                            <BsThreeDots className='text-xl text-white ml-2' />
                        </span>
                        
                        {/* row of attachments */}
                        <div className='flex flex-row flex-wrap space-x-2'>
                            {/* pdf example */}
                            <span className='flex flex-col rounded-lg'>
                                {/* attmnt header */}
                                <span className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start'>
                                    <FaFilePdf className='text-4xl text-orange-300 mr-2' />

                                    <span className='flex flex-col items-baseline mr-10 space-y-1'>
                                        <span className='text-md font-bold text-white'>report.pdf</span>
                                        
                                        <span className='text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
                                            <span>blockers</span>
                                        </span>
                                    </span>

                                    {/* attachment actions */}
                                    <button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
                                        <FaCopy className='text-sm text-white' />
                                    </button>
                                    <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                        <FaExternalLinkAlt className='text-sm text-white' />
                                    </button>

                                    <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                        <FaArchive className='text-sm text-orange-500 ' />
                                    </button>
                                </span>

                                {/* attmnt footer */}
                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
                                    <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
                                        <span className='relative flex'>
                                            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
                                            <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={30} height={30} />
                                        </span>
                                    </span>

                                    <span className='flex flex-col items-baseline'>
                                        <span className='text-xs text-gray-200 font-bold'>Adriana</span>
                                        <span className='text-xs text-gray-200 font-extralight'>5 minutes ago</span>
                                    </span>

                                    <BsThreeDots className='text-white ml-auto hover:cursor-pointer' />                                        
                                </span>
                            </span>

                            {/* jira example */}
                            <span className='flex flex-col rounded-lg'>
                                {/* attmnt header */}
                                <span className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start'>
                                    <FaAtlassian className='text-4xl text-sky-300 mr-2' />

                                    <span className='flex flex-col items-baseline mr-10 space-y-1'>
                                        <span className='text-md font-bold text-white'>RAM-22</span>
                                        <span className='text-xs text-gray-200'>technical doc - stripe</span>

                                        <span className='text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center'>                                                       
                                            <span>engineering</span>
                                        </span>
                                    </span>

                                    {/* attachment actions */}
                                    <button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
                                        <FaCopy className='text-sm text-white' />
                                    </button>
                                    <button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                        <FaExternalLinkAlt className='text-sm text-white' />
                                    </button>

                                    <button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
                                        <FaArchive className='text-sm text-orange-500' />
                                    </button>
                                </span>

                                {/* attmnt footer */}
                                <span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
                                    <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
                                        <span className='relative flex'>
                                            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
                                            <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-43.svg"} alt="profile" width={30} height={30} />
                                        </span>
                                    </span>

                                    <span className='flex flex-col items-baseline'>
                                        <span className='text-xs text-gray-200 font-bold'>Paul</span>
                                        <span className='text-xs text-gray-200 font-extralight'>2 hours ago</span>
                                    </span>

                                    <BsThreeDots className='text-white ml-auto hover:cursor-pointer' />                                        
                                </span>
                            </span>
                        </div>
                    </section>
                </div>
                
                <div className='fixed bottom-10 w-full -z-10'>                            
                    {/* 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 text-gray-300"}>{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>
            </BackgroundLayout>
            )
    }
    
}