"use client";

import { useTransition, type ChangeEvent } from "react";

import type { User } from "@/services/models/User";

import Image from "next/image";

import LoadingSpinnerSVG from "@/assets/bars-scale.animated.svg";
import CameraSVG from "@/assets/icons/camera.svg";

import { signOut, updateCurrentUser } from "@/services/actions/usersAPI";

import AccountTab from "../AccountTab/AccountTab";
import styles from "./AccountPanel.module.scss";

export default function AccountPanel({ user }: { user: User }) {
  const [isPending, startTransition] = useTransition();

  const isAdmin = user.role === "admin";

  function handleChangeAvatar(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];

    if (!file) return;

    startTransition(async () => {
      await updateCurrentUser({ avatar: file });
    });
  }

  async function handleSignOut() {
    await signOut();
  }

  return (
    <article className={styles["account-panel"]}>
      <div className={styles["account-panel__avatar-wrapper"]}>
        <label htmlFor="avatar">
          {isPending ? (
            <LoadingSpinnerSVG
              className={styles["account-panel__avatar-loader"]}
            />
          ) : (
            <Image
              src={user.avatar}
              alt={user.name}
              fill
              className={styles["account-panel__avatar"]}
            />
          )}
          <CameraSVG className={styles["account-panel__avatar-icon"]} />
        </label>

        <input
          type="file"
          name="avatar"
          id="avatar"
          accept="image/*"
          onChange={handleChangeAvatar}
          hidden
        />
      </div>

      <nav className={styles["account-panel__tab-container"]}>
        <ul className={styles["account-panel__tab-list"]}>
          <AccountTab href="/account/details">Информация</AccountTab>

          {!isAdmin && (
            <>
              <AccountTab href="/account/orders">Заказы</AccountTab>

              <AccountTab href="/account/addresses">Адреса</AccountTab>
            </>
          )}

          <li className={styles["account-panel__tab-item"]}>
            <button
              onClick={() => {
                void handleSignOut();
              }}
              className={styles["account-panel__tab"]}
            >
              Выход
            </button>
          </li>
        </ul>
      </nav>
    </article>
  );
}