import React from 'react'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'

import * as HoverCard from '@radix-ui/react-hover-card'

import WeaponLabelIcon from '~components/WeaponLabelIcon'
import UncapIndicator from '~components/UncapIndicator'

import './index.scss'

interface Props {
    gridCharacter: GridCharacter
    children: React.ReactNode
}

interface KeyNames {
    [key: string]: {
        en: string,
        jp: string
    }
}

const CharacterHovercard = (props: Props) => {
    const router = useRouter()
    const { t } = useTranslation('common')
    const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'

    const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
    const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana']

    const tintElement = Element[props.gridCharacter.object.element]
    const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll(' ', '_')}`

    function characterImage() {
        let imgSrc = ""
        
        if (props.gridCharacter) {
            const character = props.gridCharacter.object

            // Change the image based on the uncap level
            let suffix = '01'
            if (props.gridCharacter.uncap_level == 6)
                suffix = '04'
            else if (props.gridCharacter.uncap_level == 5)
                suffix = '03'
            else if (props.gridCharacter.uncap_level > 2)
                suffix = '02'

            imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_${suffix}.jpg`
        }

        return imgSrc
    }

    return (
        <HoverCard.Root>
            <HoverCard.Trigger>
                { props.children }
            </HoverCard.Trigger>
            <HoverCard.Content className="Weapon Hovercard">
                <div className="top">
                    <div className="title">
                        <h4>{ props.gridCharacter.object.name[locale] }</h4>
                        <img alt={props.gridCharacter.object.name[locale]} src={characterImage()} />
                    </div>
                    <div className="subInfo">
                        <div className="icons">
                            <WeaponLabelIcon labelType={Element[props.gridCharacter.object.element]} />
                            <WeaponLabelIcon labelType={ Proficiency[props.gridCharacter.object.proficiency.proficiency1] } />
                            { (props.gridCharacter.object.proficiency.proficiency2) ? 
                                <WeaponLabelIcon labelType={ Proficiency[props.gridCharacter.object.proficiency.proficiency2] } />
                            : ''}
                        </div>
                        <UncapIndicator 
                            type="character"
                            ulb={props.gridCharacter.object.uncap.ulb || false} 
                            flb={props.gridCharacter.object.uncap.flb || false}
                            special={false}
                        />
                    </div>
                </div>

                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">{t('buttons.wiki')}</a>
                <HoverCard.Arrow />
            </HoverCard.Content>
        </HoverCard.Root>
    )
}

export default CharacterHovercard

