/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/*                                    Hooks                                   */
/* -------------------------------------------------------------------------- */
import { useUserStore } from "user/data/userSlice";
import { useUserViewModel } from "user/controller/userViewModel";
import { useLangugeViewModel } from "localization/controller/langugeViewModel";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Area from "components/containers/area/Area";
import IconedAreaCaption from "components/containers/area/IconedAreaCaption";
import Avatar from "components/containers/Avatar";
import AreaCaption from "components/containers/area/AreaCaption";
import TextAction from "components/controls/TextAction";
import AreaValue from "components/containers/area/AreaValue";
import AreaDescription from "components/containers/area/AreaDescription";
import PersonalInfomrationEditor from "user/views/PersonalInfomrationEditor";
import LanguageSelector from "localization/views/LanguageSelector";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGEnvelopeIcon } from "assets/svg/envelope.svg";
import { ReactComponent as SVGGlobeIcon } from "assets/svg/globe.svg";
import { ReactComponent as SVGUsersIcon } from "assets/svg/users.svg";
/* -------------------------------------------------------------------------- */
/*                     Account information management page                    */
/* -------------------------------------------------------------------------- */
/**
 * Account information management page
 * @return {JSX.Element}
 */
const AccountSettings = (): JSX.Element => {
  const store = useUserStore();

  const [personalInfoModalShown, setPersonalInfoModalShown] = useState(false);
  const [languageSelecting, setLanguageSelecting] = useState(false);

  const { user, getUser } = useUserViewModel(store);
  const { languages, selected } = useLangugeViewModel();

  useEffect(() => {
    getUser();
  }, [getUser]);

  const { t } = useTranslation();
  
  return (
    <div className="flex flex-row items-start w-1/4 space-x-12">
      <div className="basis-1/3">
        <Avatar width="100%" className="p-12" />
      </div>
      <div className="basis-2/3">
        <Area>
          <AreaValue>
            {user?.firstname}
            <br />
            {user?.lastname}
          </AreaValue>
          <AreaCaption secondary={true} className="mt-5">
            {user?.username}
          </AreaCaption>
          <AreaDescription>
            <TextAction variant="blue" onClick={() => setPersonalInfoModalShown(true)}>
              {t("edit")}
            </TextAction>
          </AreaDescription>
        </Area>
        <Area>
          <IconedAreaCaption
            icon={<SVGEnvelopeIcon className="w-full h-full stroke-gray-300" />}
            caption={t("account.mail")}
          />
          <AreaValue>{user?.email}</AreaValue>
        </Area>
        <Area>
          <IconedAreaCaption
            icon={<SVGGlobeIcon className="w-full h-full stroke-gray-300" />}
            caption={t("language")}
          />
          <AreaValue>{languages[selected].nativeName.toLowerCase()}</AreaValue>
          <AreaDescription>
            <TextAction variant="blue" onClick={() => setLanguageSelecting(true)}>
              {t("edit")}
            </TextAction>
          </AreaDescription>
        </Area>
        <Area>
          <IconedAreaCaption
            icon={<SVGUsersIcon className="w-full h-full stroke-gray-300" />}
            caption={t("account.connectedAccounts", { count: 0 })}
          />
          <AreaValue>nothing)</AreaValue>
          <AreaDescription>
            <TextAction variant="blue">{t("edit")}</TextAction>
          </AreaDescription>
        </Area>
      </div>
      <LanguageSelector
        isShown={languageSelecting}
        onClose={() => setLanguageSelecting(false)}
      />
      <PersonalInfomrationEditor
        isShown={personalInfoModalShown}
        onClose={() => setPersonalInfoModalShown(false)}
      />
    </div>
  );
};

export default AccountSettings;
