hensei-web/components/AccountModal/index.tsx

import React, { useEffect, useState } from "react";
import { getCookie } from "cookies-next";
import { useRouter } from "next/router";
import { useSnapshot } from "valtio";
import { useTranslation } from "next-i18next";

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

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

import Button from "~components/Button";

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

const AccountModal = () => {
  const { account } = useSnapshot(accountState);

  const router = useRouter();
  const { t } = useTranslation("common");
  const locale =
    router.locale && ["en", "ja"].includes(router.locale)
      ? router.locale
      : "en";

  // Cookies
  const cookie = getCookie("account");

  const headers = {};
  // cookies.account != null
  //   ? {
  //       headers: {
  //         Authorization: `Bearer ${cookies.account.access_token}`,
  //       },
  //     }
  //   : {}

  // State
  const [open, setOpen] = useState(false);
  const [picture, setPicture] = useState("");
  const [language, setLanguage] = useState("");
  const [gender, setGender] = useState(0);
  const [privateProfile, setPrivateProfile] = useState(false);

  // Refs
  const pictureSelect = React.createRef<HTMLSelectElement>();
  const languageSelect = React.createRef<HTMLSelectElement>();
  const genderSelect = React.createRef<HTMLSelectElement>();
  const privateSelect = React.createRef<HTMLInputElement>();

  // useEffect(() => {
  //   if (cookies.user) setPicture(cookies.user.picture)
  //   if (cookies.user) setLanguage(cookies.user.language)
  //   if (cookies.user) setGender(cookies.user.gender)
  // }, [cookies])

  const pictureOptions = pictureData
    .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
    .map((item, i) => {
      return (
        <option key={`picture-${i}`} value={item.filename}>
          {item.name[locale]}
        </option>
      );
    });

  function handlePictureChange(event: React.ChangeEvent<HTMLSelectElement>) {
    if (pictureSelect.current) setPicture(pictureSelect.current.value);
  }

  function handleLanguageChange(event: React.ChangeEvent<HTMLSelectElement>) {
    if (languageSelect.current) setLanguage(languageSelect.current.value);
  }

  function handleGenderChange(event: React.ChangeEvent<HTMLSelectElement>) {
    if (genderSelect.current) setGender(parseInt(genderSelect.current.value));
  }

  function handlePrivateChange(checked: boolean) {
    setPrivateProfile(checked);
  }

  function update(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const object = {
      user: {
        picture: picture,
        element: pictureData.find((i) => i.filename === picture)?.element,
        language: language,
        gender: gender,
        private: privateProfile,
      },
    };

    // api.endpoints.users
    //   .update(cookies.account.user_id, object, headers)
    //   .then((response) => {
    //     const user = response.data.user

    //     const cookieObj = {
    //       picture: user.picture.picture,
    //       element: user.picture.element,
    //       gender: user.gender,
    //       language: user.language,
    //     }

    //     setCookies("user", cookieObj, { path: "/" })

    //     accountState.account.user = {
    //       id: user.id,
    //       username: user.username,
    //       picture: user.picture.picture,
    //       element: user.picture.element,
    //       gender: user.gender,
    //     }

    //     setOpen(false)
    //     changeLanguage(user.language)
    //   })
  }

  function changeLanguage(newLanguage: string) {
    // if (newLanguage !== router.locale) {
    //   setCookies("NEXT_LOCALE", newLanguage, { path: "/" })
    //   router.push(router.asPath, undefined, { locale: newLanguage })
    // }
  }

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

  return (
    <Dialog.Root open={open} onOpenChange={openChange}>
      <Dialog.Trigger asChild>
        <li className="MenuItem">
          <span>{t("menu.settings")}</span>
        </li>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Content
          className="Account Dialog"
          onOpenAutoFocus={(event) => event.preventDefault()}
        >
          <div className="DialogHeader">
            <div className="DialogTop">
              <Dialog.Title className="SubTitle">
                {t("modals.settings.title")}
              </Dialog.Title>
              <Dialog.Title className="DialogTitle">
                @{account.user?.username}
              </Dialog.Title>
            </div>
            <Dialog.Close className="DialogClose" asChild>
              <span>
                <CrossIcon />
              </span>
            </Dialog.Close>
          </div>

          <form onSubmit={update}>
            <div className="field">
              <div className="left">
                <label>{t("modals.settings.labels.picture")}</label>
              </div>

              <div
                className={`preview ${
                  pictureData.find((i) => i.filename === picture)?.element
                }`}
              >
                <img
                  alt="Profile preview"
                  srcSet={`/profile/${picture}.png,
                                             /profile/${picture}@2x.png 2x`}
                  src={`/profile/${picture}.png`}
                />
              </div>

              <select
                name="picture"
                onChange={handlePictureChange}
                value={picture}
                ref={pictureSelect}
              >
                {pictureOptions}
              </select>
            </div>
            <div className="field">
              <div className="left">
                <label>{t("modals.settings.labels.gender")}</label>
              </div>

              <select
                name="gender"
                onChange={handleGenderChange}
                value={gender}
                ref={genderSelect}
              >
                <option key="gran" value="0">
                  {t("modals.settings.gender.gran")}
                </option>
                <option key="djeeta" value="1">
                  {t("modals.settings.gender.djeeta")}
                </option>
              </select>
            </div>
            <div className="field">
              <div className="left">
                <label>{t("modals.settings.labels.language")}</label>
              </div>

              <select
                name="language"
                onChange={handleLanguageChange}
                value={language}
                ref={languageSelect}
              >
                <option key="en" value="en">
                  {t("modals.settings.language.english")}
                </option>
                <option key="jp" value="ja">
                  {t("modals.settings.language.japanese")}
                </option>
              </select>
            </div>
            <div className="field">
              <div className="left">
                <label>{t("modals.settings.labels.private")}</label>
                <p className={locale}>
                  {t("modals.settings.descriptions.private")}
                </p>
              </div>

              <Switch.Root
                className="Switch"
                onCheckedChange={handlePrivateChange}
                checked={privateProfile}
              >
                <Switch.Thumb className="Thumb" />
              </Switch.Root>
            </div>

            <Button>{t("modals.settings.buttons.confirm")}</Button>
          </form>
        </Dialog.Content>
        <Dialog.Overlay className="Overlay" />
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default AccountModal;