hensei-web/components/WeaponHovercard/index.tsx

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 { axData } from '~utils/axData'

import './index.scss'

interface Props {
    gridWeapon: GridWeapon
    children: React.ReactNode
}

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

const WeaponHovercard = (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 WeaponKeyNames: KeyNames = {
        '2': {
            en: 'Pendulum',
            ja: 'ペンデュラム'
        },
        '3': {
            en: 'Teluma',
            ja: 'テルマ'
        },
        '17': {
            en: 'Gauph Key',
            ja: 'ガフスキー'
        },
        '22': {
            en: 'Emblem',
            ja: 'エンブレム'
        }
    }

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

    const hovercardSide = () => {
        if (props.gridWeapon.position == -1)
            return "right"
        else if ([6, 7, 8, 9, 10, 11].includes(props.gridWeapon.position))
            return "top"
        else
            return "bottom"
    }

    const createPrimaryAxSkillString = () => {
        const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]

        if (props.gridWeapon.ax) {
            const simpleAxSkill = props.gridWeapon.ax[0]
            const axSkill = primaryAxSkills.find(skill => skill.id == simpleAxSkill.modifier)
            
            return `${axSkill?.name[locale]} +${simpleAxSkill.strength}${ (axSkill?.suffix) ? axSkill.suffix : '' }`
        }

        return ''
    }

    const createSecondaryAxSkillString = () => {
        const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]

        if (props.gridWeapon.ax) {
            const primarySimpleAxSkill = props.gridWeapon.ax[0]
            const secondarySimpleAxSkill = props.gridWeapon.ax[1]

            const primaryAxSkill = primaryAxSkills.find(skill => skill.id == primarySimpleAxSkill.modifier)

            if (primaryAxSkill && primaryAxSkill.secondary) {
                const secondaryAxSkill = primaryAxSkill.secondary.find(skill => skill.id == secondarySimpleAxSkill.modifier)
                return `${secondaryAxSkill?.name[locale]} +${secondarySimpleAxSkill.strength}${ (secondaryAxSkill?.suffix) ? secondaryAxSkill.suffix : '' }`
            }
        }

        return ''
    }

    function weaponImage() {
        const weapon = props.gridWeapon.object

        if (props.gridWeapon.object.element == 0 && props.gridWeapon.element)
            return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`
        else
            return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
    }

    const keysSection = (
        <section className="weaponKeys">
            { (WeaponKeyNames[props.gridWeapon.object.series]) ?
                <h5 className={tintElement}>{ WeaponKeyNames[props.gridWeapon.object.series][locale] }{ (locale === 'en') ? 's' : '' }</h5> : '' 
            }

            { (props.gridWeapon.weapon_keys) ?
                Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => {
                    return (
                        <div className="weaponKey" key={props.gridWeapon.weapon_keys![i].id}>
                        <span>{props.gridWeapon.weapon_keys![i].name[locale]}</span>
                        </div>
                    )
                }) : '' }
        </section>
    )

    const axSection = (
        <section className="axSkills">
            <h5 className={tintElement}>{t('modals.weapon.subtitles.ax_skills')}</h5>
            <div className="skills">
                <div className="primary axSkill">
                    <img alt="AX1" src={`/icons/ax/primary_${ (props.gridWeapon.ax) ? props.gridWeapon.ax[0].modifier : '' }.png`} />
                    <span>{createPrimaryAxSkillString()}</span>
                </div>

                { (props.gridWeapon.ax && props.gridWeapon.ax[1].modifier && props.gridWeapon.ax[1].strength) ?
                    <div className="secondary axSkill">
                        <img alt="AX2" src={`/icons/ax/secondary_${ (props.gridWeapon.ax) ? props.gridWeapon.ax[1].modifier : '' }.png`} />
                        <span>{createSecondaryAxSkillString()}</span>
                    </div> : ''}
            </div>
        </section>
    )

    return (
        <HoverCard.Root>
            <HoverCard.Trigger>
                { props.children }
            </HoverCard.Trigger>
            <HoverCard.Content className="Weapon Hovercard" side={hovercardSide()}>
                <div className="top">
                    <div className="title">
                        <h4>{ props.gridWeapon.object.name[locale] }</h4>
                        <img alt={props.gridWeapon.object.name[locale]} src={weaponImage()} />
                    </div>
                    <div className="subInfo">
                        <div className="icons">
                            { (props.gridWeapon.object.element !== 0 || (props.gridWeapon.object.element === 0 && props.gridWeapon.element != null)) ? 
                                <WeaponLabelIcon labelType={ (props.gridWeapon.object.element === 0 && props.gridWeapon.element !== 0) ? Element[props.gridWeapon.element] : Element[props.gridWeapon.object.element] } />
                                : '' }
                            <WeaponLabelIcon labelType={ Proficiency[props.gridWeapon.object.proficiency] } />
                        </div>
                        <UncapIndicator 
                            type="weapon"
                            ulb={props.gridWeapon.object.uncap.ulb || false} 
                            flb={props.gridWeapon.object.uncap.flb || false}
                            special={false}
                        />
                    </div>
                </div>

                { (props.gridWeapon.object.ax > 0 && props.gridWeapon.ax && props.gridWeapon.ax[0].modifier && props.gridWeapon.ax[0].strength ) ? axSection : '' }
                { (props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0) ? keysSection : '' }
                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">{t('buttons.wiki')}</a>
                <HoverCard.Arrow />
            </HoverCard.Content>
        </HoverCard.Root>
    )
}

export default WeaponHovercard