import styles from 'styles/window/ProfileWindow.module.css'
import AccountIcon from '../AccountIcon'
import { FaTwitter, FaYoutube, FaTwitch, FaDiscord, FaReddit, FaInfoCircle } from 'react-icons/fa'
import toast from 'react-hot-toast'
import { useMediaQuery } from 'hooks/useMediaQuery'
import MainWindow from './MainWindow'
import { useRouter } from 'next/router'
import gridStyles from "styles/WeaponGridItem.module.css"

// @ts-ignore
import { useState } from "react"
import { format_time, getLevelFromXP } from 'helper';
import type { Clan, ClanDataProps, GeneralProps } from "helper/types"
import { BadgesProps, DataTextProps, LeftSideProps, MiddleSideProps, ClanWindowProps, RightSideProps, SocialProps } from 'helper/types'
import Link from 'next/link'
const ClanWindow = ({ socials = [{
    href: 'https://example.com',
    social: "twitter"
}, {
    href: 'Example#6942',
    social: "discord"
},
{
    href: 'https://example.com',
    social: "youtube"
}, {
    href: 'https://example.com',
    social: "twitch"
},
{
    social: "reddit",
    href: 'https://example.com'
}
],
    badges = [],
    views = 0, share = true, error = undefined,
    clan,
    clan_create_date,
    clan_id,
    clan_name,
    clan_xp
}: ClanWindowProps) => {
    const isSmall = useMediaQuery({ maxWidth: "800px" })

    if (error || clan === undefined || clan === null || Object?.keys(clan)?.length === 0) return (
        <MainWindow>
            <h1 className='text-center text-5xl text-gold-300 font-Coda'>Invalid ID!</h1>
        </MainWindow>
    )
    const leftSide = <LeftSide clan_create_date={clan_create_date} socials={socials} />
    const middleSide = <MiddleSide clan_name={clan_name} share={share} clan_id={clan_id} />
    return (
        <MainWindow>
            <div className={styles.top}>
                {!isSmall ? leftSide : middleSide}
                {!isSmall ? middleSide : leftSide}
                <RightSide badges={badges} views={views} />
                <Data clan_create_date={clan_create_date} clan_xp={clan_xp} clan={clan} />
            </div>
        </MainWindow>
    )
}
const Data = ({ clan, clan_xp, clan_create_date }: ClanDataProps) => {
    const [optionIndex, setOptionIndex] = useState(0)
    let options = ["General"]

    return (
        <div className={styles.main}>
            <div className="select-none">
                <span className={styles.options}>
                    {options.map((option: string, index: number) => {
                        // if (!rankedExists) {
                        //     if (option == "Ranked" || option == "2v2 Ranked") return
                        //     // (
                        //     //     <div className={`${styles.options_button_wrapper} group`}>
                        //     //         <button className={styles.options_button} disabled key={`option_${index}`}>
                        //     //             {option}
                        //     //         </button>
                        //     //         <div data-tooltip-arrow="top" className={`group-hover:scale-100 ml-5 tooltip`}>
                        //     //             This player has no ranked stats
                        //     //         </div>
                        //     //     </div>
                        //     // )
                        // }
                        return (
                            <div key={`option_${index}`} className={styles.options_button_wrapper}>
                                <button className={styles.options_button} onClick={(e) => {
                                    setOptionIndex(index)
                                }} data-selected={optionIndex === index}>
                                    {option}
                                </button>
                            </div>
                        )
                    })}
                </span>
                {/* <div className={styles.divider} /> */}
            </div>
            <br />
            <div className={styles.data_wrapper}>

                {(options[optionIndex] === "General") && <General clan={clan} clan_xp={clan_xp} />}
            </div>
        </div>
    )
}

const General = ({ clan, clan_xp }: GeneralProps) => {
    let level = 5
    let level_percentage = "4"
    let lvl: string | number = level >= 100 ? level : `${level}.${level_percentage}(${clan_xp?.toLocaleString()})`

    return (
        < div >
            <div className='flex justify-center gap-6 mb-4'>
                <DataText inline title='Level' text={lvl} />
                <DataText inline title='Members' text={clan.length} />
            </div>
            
            <div style={{
                display: "grid",
                gridTemplateColumns: `repeat(auto-fill, minmax(16rem, 1fr))`,
                gap: "2.5rem",
                paddingLeft: "0.5rem",
                paddingRight: "0.5rem",
                overflowX: "hidden"
            }}>

                {clan.sort((a: Clan["clan"][0], b: Clan["clan"][0]) => {
                    return b.xp - a.xp
                })?.map((player:Clan["clan"][0], index: number) => {
                    return (
                        <Link key={`player_${index}`} href={`/player/${player.brawlhalla_id}`}>
                            <a className={gridStyles.parent + " cursor-pointer"}>
                                <div className={gridStyles.imageContainer}>
                                </div>
                                <div className={gridStyles.content}>
                                    <h1 style={player.name.length >= 15 ? {
                                        fontSize: ((1 / 15) * 18) + "rem",
                                        lineHeight: ((1.5 / 15) * 18) + "rem",
                                    } : {}}>
                                        {player.name}
                                    </h1>
                                    <div className="mt-2">
                                        Rank: <span className={gridStyles.weapon_value}>{player.rank}</span><br />
                                        Joined at: <span className={gridStyles.weapon_value}>{format_time(player.join_date)}</span><br />
                                        XP: <span className={gridStyles.weapon_value}>{player.xp.toLocaleString()}</span><br />
                                        Level: <span className={gridStyles.weapon_value}>{getLevelFromXP(player.xp)}</span><br />
                                        
                                    </div>
                                </div>
                            </a>
                        </Link>
                    )
                })}
            </div>
        </div >
    )
}
const DataText = ({
    text = "Placeholder", title = "Placeholder",
    tooltip = false, tooltipText = "Placeholder",
    inline = false }: DataTextProps) => {
    const isMedium = useMediaQuery({ maxWidth: "1500px" })
    const isSmall = useMediaQuery({ maxWidth: "800px" })
    const isTiny = useMediaQuery({ maxWidth: "700px" })
    let dataTooltipPos = "right";
    if (isTiny) {
        dataTooltipPos = "top";
    } else if (isSmall) {
        dataTooltipPos = "right"
    }
    else if (isMedium) {
        dataTooltipPos = "left"
    }
    return (
        <div className={styles.data_title} style={{
            display: inline ? "inline" : "block"
        }}>
            <span data-tooltip-ml={(title && title.length !== 0 && title.length <= 4) ? "medium" : ""} data-tooltip-pos={dataTooltipPos} className={`${tooltip ? "tooltip" : ""}`} data-tip={tooltipText}>
                <span className='pr-2'>
                    {title?.toString()?.charAt(0)?.toUpperCase() + title?.toString()?.slice(1)}:
                </span>
                <span className={styles.data_value + " group"}>
                    {text?.toString()?.charAt(0)?.toUpperCase() + text?.toString().slice(1)}  {tooltip && <FaInfoCircle className='inline-block w-3 h-3 top-0 -mt-5 -ml-1' />}
                    {/* If theres a tooltip add an info icon at the top right */}
                </span>

            </span>
        </div>
    )
}
const MiddleSide = ({ clan_name = "", description = "", clan_id, share, account_image }: MiddleSideProps) => {
    const router = useRouter()
    return (
        <div className={styles.middle}>
            <AccountIcon clan star starValue={{
                id: clan_id,
                starredAt: Date.now(),
                name: clan_name
            }} share={share} shareValue={process.env.DOMAIN + router.asPath} src={account_image} size={"6rem"} />
            <span className={styles.name}>
                {clan_name}
            </span>
            {description ? <span className={styles.description}>
                &ldquo; {description} &bdquo;
            </span> : null}

        </div>
    )
}

const LeftSide = ({ socials = [], clan_create_date = 0 }: LeftSideProps) => {
    return (
        <div className={styles.left}>
            <div>
                <div>
                    <span className={styles.section}>
                        Socials
                    </span>
                    <div className={styles.section_text}>
                        {/* {socials?.map((social, i) => {
                            return (
                                <SocialButton key={`social_${i}`} {...social} />
                            )
                        })
                        } */}
                    </div>
                    <br />
                </div>
                <div>
                    <span className={styles.section}>
                        Created At
                    </span>
                    <div className={styles.section_text}>
                        {format_time(clan_create_date)}
                    </div>
                </div>
            </div>
        </div>
    )
}

const RightSide = ({ badges = [], views }: RightSideProps) => {
    return (
        <div className={styles.right}>
            <div>
                <div>
                    <span className={styles.section}>
                        Profile Badges
                    </span>
                    <div className={styles.section_text}>Soon™</div>
                </div>
                <div>
                    <span className={styles.section}>
                        Views
                    </span>
                    <div className={styles.section_text}>{views}</div>
                </div>
            </div>
        </div>
    )
}
const Badges = ({ badges }: BadgesProps) => {
    return (
        <div className={styles.section_text}>
            <p className='text-gold-300 shine'>#1</p>
        </div>
    )
}
const SocialButton = ({ href, social }: SocialProps) => {
    let icon;
    if (social === "discord") return (
        <button className={`tooltip ${styles.social_wrapper}`} data-tooltip-pos=
            "right"
            data-tip={href}>

            <FaDiscord size={"1.5rem"} color='#5865F2' onClick={async () => {
                await navigator.clipboard.writeText(href)
                toast.success("Copied Discord tag to clipboard!")
            }} />
        </button>
    )
    if (social === "twitter") icon = <FaTwitter size={"1.5rem"} color='#1DA1F2' />
    if (social === "youtube") icon = <FaYoutube className="hover:brightness-75" size={"1.5rem"} color='#FF0000' />
    if (social === "twitch") icon = <FaTwitch size={"1.5rem"} color="#6441A4" />
    if (social === "reddit") icon = <FaReddit size={"1.5rem"} color="#FF4500" />
    return (
        <a aria-label={social} href={href} rel="noreferrer noopener" target={href ? "_blank" : ''} className={styles.social_wrapper}>
            {icon}
        </a>
    )
}

export default ClanWindow