hensei-web/components/WeaponModal/index.tsx

import React, { useState } from 'react'
import { useCookies } from 'react-cookie'
import { AxiosResponse } from 'axios'
import * as Dialog from '@radix-ui/react-dialog'

import AXSelect from '~components/AxSelect'
import ElementToggle from '~components/ElementToggle'
import WeaponKeyDropdown from '~components/WeaponKeyDropdown'
import Button from '~components/Button'

import api from '~utils/api'
import { appState } from '~utils/appState'

import CrossIcon from '~public/icons/Cross.svg'
import './index.scss'


interface GridWeaponObject {
    weapon: {
        element?: number
        weapon_key1_id?: string
        weapon_key2_id?: string
        weapon_key3_id?: string
        ax_modifier1?: number
        ax_modifier2?: number
        ax_strength1?: number
        ax_strength2?: number
    }
}

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

const WeaponModal = (props: Props) => {
    // Cookies
    const [cookies, _] = useCookies(['user'])
    const headers = (cookies.user != null) ? {
        headers: {
            'Authorization': `Bearer ${cookies.user.access_token}`
        }
    } : {}
    
    // Refs
    const weaponKey1Select = React.createRef<HTMLSelectElement>()
    const weaponKey2Select = React.createRef<HTMLSelectElement>()
    const weaponKey3Select = React.createRef<HTMLSelectElement>()

    // State
    const [open, setOpen] = useState(false)
    const [formValid, setFormValid] = useState(false)

    const [element, setElement] = useState(-1)
    const [primaryAxModifier, setPrimaryAxModifier] = useState(-1)
    const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1)
    const [primaryAxValue, setPrimaryAxValue] = useState(0.0)
    const [secondaryAxValue, setSecondaryAxValue] = useState(0.0)
    
    function receiveAxValues(primaryAxModifier: number, primaryAxValue: number, secondaryAxModifier: number, secondaryAxValue: number) {
        setPrimaryAxModifier(primaryAxModifier)
        setSecondaryAxModifier(secondaryAxModifier)

        setPrimaryAxValue(primaryAxValue)
        setSecondaryAxValue(secondaryAxValue)
    }

    function receiveAxValidity(isValid: boolean) {
        setFormValid(isValid)
    }

    function receiveElementValue(element: string) {
        setElement(parseInt(element))
    }

    function prepareObject() {
        let object: GridWeaponObject = { weapon: {} }

        if (props.gridWeapon.object.element == 0)
            object.weapon.element = element

        if ([2, 3, 17, 24].includes(props.gridWeapon.object.series))
            object.weapon.weapon_key1_id = weaponKey1Select.current?.value

        if ([2, 3, 17].includes(props.gridWeapon.object.series))
            object.weapon.weapon_key2_id = weaponKey2Select.current?.value

        if (props.gridWeapon.object.series == 17)
            object.weapon.weapon_key3_id = weaponKey3Select.current?.value

        if (props.gridWeapon.object.ax > 0) {
            object.weapon.ax_modifier1 = primaryAxModifier
            object.weapon.ax_modifier2 = secondaryAxModifier
            object.weapon.ax_strength1 = primaryAxValue
            object.weapon.ax_strength2 = secondaryAxValue
        }

        return object
    }

    async function updateWeapon() {
        const updateObject = prepareObject()
        return await api.endpoints.grid_weapons.update(props.gridWeapon.id, updateObject, headers)
            .then(response => processResult(response))
            .catch(error => processError(error))
    }

    function processResult(response: AxiosResponse) {
        const gridWeapon: GridWeapon = response.data.grid_weapon

        if (gridWeapon.mainhand)
            appState.grid.weapons.mainWeapon = gridWeapon
        else
            appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon

        setOpen(false)
    }

    function processError(error: any) {
        console.error(error)
    }

    const elementSelect = () => {
        return (
            <section>
                <h3>Element</h3>
                <ElementToggle 
                    currentElement={props.gridWeapon.element} 
                    sendValue={receiveElementValue}
                />
            </section>
        )
    }

    const keySelect = () => {
        return (
            <section>
                <h3>Weapon Keys</h3>
                { ([2, 3, 17, 22].includes(props.gridWeapon.object.series)) ? 
                    <WeaponKeyDropdown
                        currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[0] : undefined }
                        series={props.gridWeapon.object.series}
                        slot={0} 
                        ref={weaponKey1Select} />
                        : ''}

                { ([2, 3, 17].includes(props.gridWeapon.object.series)) ? 
                    <WeaponKeyDropdown 
                        currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[1] : undefined }
                        series={props.gridWeapon.object.series}
                        slot={1}
                        ref={weaponKey2Select} />
                        : ''}

                { (props.gridWeapon.object.series == 17) ? 
                    <WeaponKeyDropdown 
                        currentValue={ (props.gridWeapon.weapon_keys) ? props.gridWeapon.weapon_keys[2] : undefined } 
                        series={props.gridWeapon.object.series}
                        slot={2}
                        ref={weaponKey3Select} />
                        : ''}
            </section>
        )
    }

    const axSelect = () => {
        return (
            <section>
                <AXSelect 
                    axType={props.gridWeapon.object.ax}
                    currentSkills={props.gridWeapon.ax}
                    sendValidity={receiveAxValidity}
                    sendValues={receiveAxValues}    
                />
            </section>
        )
    }

    function openChange(open: boolean) {
        setFormValid(false)
        setOpen(open)
    }
    
    return (
        <Dialog.Root open={open} onOpenChange={openChange}>
            <Dialog.Trigger asChild>
                { props.children }
            </Dialog.Trigger>
            <Dialog.Portal>
                <Dialog.Content className="Weapon Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
                    <div className="DialogHeader">
                        <div className="DialogTop">
                            <Dialog.Title className="SubTitle">Modify Weapon</Dialog.Title>
                            <Dialog.Title className="DialogTitle">{props.gridWeapon.object.name.en}</Dialog.Title>
                        </div>
                        <Dialog.Close className="DialogClose" asChild>
                            <span>
                                <CrossIcon />
                            </span>
                        </Dialog.Close>
                    </div>

                    <div className="mods">
                        { (props.gridWeapon.object.element == 0) ? elementSelect() : '' }
                        { ([2, 3, 17, 24].includes(props.gridWeapon.object.series)) ? keySelect() : '' }
                        { (props.gridWeapon.object.ax > 0) ? axSelect() : '' }
                        <Button click={updateWeapon} disabled={props.gridWeapon.object.ax > 0 && !formValid}>Save Weapon</Button>
                    </div>
                </Dialog.Content>
                <Dialog.Overlay className="Overlay" />
            </Dialog.Portal>
        </Dialog.Root>
    )
}

export default WeaponModal