hensei-web/components/WeaponModal/index.tsx

import React, { useState } from "react";
import { getCookie } from "cookies-next";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
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) => {
  const router = useRouter();
  const locale =
    router.locale && ["en", "ja"].includes(router.locale)
      ? router.locale
      : "en";
  const { t } = useTranslation("common");

  // Cookies
  const cookie = getCookie("account");
  const accountData: AccountCookie = cookie
    ? JSON.parse(cookie as string)
    : null;
  const headers = accountData
    ? { Authorization: `Bearer ${accountData.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>{t("modals.weapon.subtitles.element")}</h3>
        <ElementToggle
          currentElement={props.gridWeapon.element}
          sendValue={receiveElementValue}
        />
      </section>
    );
  };

  const keySelect = () => {
    return (
      <section>
        <h3>{t("modals.weapon.subtitles.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>
        <h3>{t("modals.weapon.subtitles.ax_skills")}</h3>
        <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">
                {t("modals.weapon.title")}
              </Dialog.Title>
              <Dialog.Title className="DialogTitle">
                {props.gridWeapon.object.name[locale]}
              </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
              onClick={updateWeapon}
              disabled={props.gridWeapon.object.ax > 0 && !formValid}
            >
              {t("modals.weapon.buttons.confirm")}
            </Button>
          </div>
        </Dialog.Content>
        <Dialog.Overlay className="Overlay" />
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default WeaponModal;