import React, { useEffect, useState } from "react";
import { setCookie } from "cookies-next";
import Router, { useRouter } from "next/router";
import { useTranslation } from "react-i18next";
import { AxiosResponse } from "axios";

import * as Dialog from "@radix-ui/react-dialog";

import api from "~utils/api";
import { appState } from "~utils/appState";
import { accountState } from "~utils/accountState";

import Button from "~components/Button";

import "./index.scss";

interface Props {
  open: boolean;
  incomingCharacter?: Character;
  conflictingCharacters?: GridCharacter[];
  desiredPosition: number;
  resolveConflict: () => void;
  resetConflict: () => void;
}

const CharacterConflictModal = (props: Props) => {
  const { t } = useTranslation("common");

  // States
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setOpen(props.open);
  }, [setOpen, props.open]);

  function imageUrl(character?: Character, uncap: number = 0) {
    // Change the image based on the uncap level
    let suffix = "01";
    if (uncap == 6) suffix = "04";
    else if (uncap == 5) suffix = "03";
    else if (uncap > 2) suffix = "02";

    // Special casing for Lyria (and Young Cat eventually)
    if (character?.granblue_id === "3030182000") {
      let element = 1;
      if (
        appState.grid.weapons.mainWeapon &&
        appState.grid.weapons.mainWeapon.element
      ) {
        element = appState.grid.weapons.mainWeapon.element;
      } else if (appState.party.element != 0) {
        element = appState.party.element;
      }

      suffix = `${suffix}_0${element}`;
    }

    return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-square/${character?.granblue_id}_${suffix}.jpg`;
  }

  function openChange(open: boolean) {
    setOpen(open);
  }

  function close() {
    setOpen(false);
    props.resetConflict();
  }

  return (
    <Dialog.Root open={open} onOpenChange={openChange}>
      <Dialog.Portal>
        <Dialog.Content
          className="Conflict Dialog"
          onOpenAutoFocus={(event) => event.preventDefault()}
        >
          <p>
            Only one version of a character can be included in each party. Do
            you want to change your party members?
          </p>
          <div className="diagram">
            <ul>
              {props.conflictingCharacters?.map((character, i) => (
                <li className="character" key={`conflict-${i}`}>
                  <img
                    alt={character.object.name.en}
                    src={imageUrl(character.object, character.uncap_level)}
                  />
                  <span>{character.object.name.en}</span>
                </li>
              ))}
            </ul>
            <span className="arrow">&rarr;</span>
            <div className="character">
              <img
                alt={props.incomingCharacter?.name.en}
                src={imageUrl(props.incomingCharacter)}
              />
              {props.incomingCharacter?.name.en}
            </div>
          </div>
          <footer>
            <Button onClick={close}>Nevermind</Button>
            <Button onClick={props.resolveConflict}>Confirm</Button>
          </footer>
        </Dialog.Content>
        <Dialog.Overlay className="Overlay" />
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default CharacterConflictModal;