import * as React from "react";
import { Navigate } from "react-router-dom";
import { authTokenStorageHandlerInit } from "../components/storageHandler.ts";

import TilingItem from "../components/TilingItem.tsx";
import SettingButton from "../components/SettingButton.tsx";
import AccountSetting from "./settings/Account.tsx";
import SecuritySetting from "./settings/Security.tsx";
import NotFoundSetting from "./settings/NotFound.tsx";

function renderCurrentSetting(setting: string) {
  switch (setting) {
    case "Account":
      return <AccountSetting></AccountSetting>;
    case "Security":
      return <SecuritySetting></SecuritySetting>;
    default:
      return <NotFoundSetting></NotFoundSetting>;
  }
}

export default function Home() {
  const settings = ["Account", "Security"];
  const [currentSetting, setCurrentSetting] = React.useState(settings[0]);
  /* Make object to pass by reference */
  const currentSettingHook = {
    currentSetting,
    setCurrentSetting,
  };

  const authTokenStorageHandler = authTokenStorageHandlerInit();

  if (!authTokenStorageHandler.authTokenValue) {
    return <Navigate to="/home"></Navigate>;
  }

  return (
    <>
      <div className="standardHorizontalTilingGrid">
        <TilingItem>
          <div className="userSettings">
            <div className="userSettingsList">
              <p>USER SETTINGS</p>
              <ul>
                {settings.map((value, index) => (
                  <SettingButton
                    settingName={value}
                    currentSettingHook={currentSettingHook}
                    key={index}
                  ></SettingButton>
                ))}
              </ul>
            </div>
            <hr></hr>
            <div className="currentSetting">
              {renderCurrentSetting(currentSetting)}
            </div>
          </div>
        </TilingItem>
      </div>
    </>
  );
}