import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

import { IconButton } from "./button";
import { showConfirm } from "./ui-lib";

import Locale from "../locales";
import { Path } from "../constant";
import { ErrorBoundary } from "./error";

import styles from "./settings.module.scss";

import CloseIcon from "../icons/close.svg";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons'

export function Settings() {
  const navigate = useNavigate();

  useEffect(() => {
    const keydownEvent = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        navigate(Path.Home);
      }
    };
    document.addEventListener("keydown", keydownEvent);
    return () => {
      document.removeEventListener("keydown", keydownEvent);
    };
  }, []);

  return (
    <ErrorBoundary>
      <div className="window-header">
        <div className="window-header-title">
          <div className="window-header-main-title">
            {Locale.Settings.Title}
          </div>
          <div className="window-header-sub-title">
            {Locale.Settings.SubTitle}
          </div>
        </div>
        <div className="window-actions">
          <div className="window-action-button"></div>
          <div className="window-action-button"></div>
          <div className="window-action-button">
            <IconButton
              icon={<CloseIcon />}
              onClick={() => navigate(Path.Home)}
              bordered
            />
          </div>
        </div>
      </div>
      <div className={styles["settings"]}>
        <div className={styles["logout-button"]}>
          <IconButton
            icon={<FontAwesomeIcon icon={faRightFromBracket} />}
            text={Locale.Settings.Danger.Logout.Action}
            onClick={async () => {
              if (await showConfirm(Locale.Settings.Danger.Logout.Confirm)) {
                // navigate(Path.Logout);
                window.location.href = '/logout';
              }
            }}
            type="danger"
          />
        </div>

      </div>
    </ErrorBoundary>
  );
}