dmenu-plus-front/src/app/[name]/(Profile)/profile/settings/page.tsx

"use client";

import Button from "@/components/button/PrimaryButton";
import PasswordField from "@/components/input/PasswordField";
import { Switch } from "@/components/ui/switch";
import Accordion from "@/components/utils/Accordion";
import Seperator from "@/components/utils/Seperator";
import { SmartIcon } from "@/components/utils/SmartIcon";
import { getI18nObject } from "@/lib/i18n";
import { glassSurfaceCard } from "@/lib/styles/glassSurface";
import { SettingsData } from "@/types/i18n/settings";
import { ArrowLeft, Key, TickCircle } from "iconsax-react";
import { useRouter } from "next/navigation";
import React, { Fragment, useState } from "react";
import { useTranslation } from "react-i18next";

function UserSettingsIndex() {
  const router = useRouter();
  const { t } = useTranslation("settings");
  const data: SettingsData = getI18nObject(t, "data");
  const [statisticalParticipation, setStatisticalParticipation] = useState(true);

  const onSwitched = (e: React.MouseEvent) => {
    const target = e.target as HTMLElement;
    console.log("Save changed setting?", target.id);
  };

  const handleStatisticalToggle = (checked: boolean) => {
    setStatisticalParticipation(checked);
    console.log("Statistical participation:", checked);
  };

  const notifsTab = () => {
    return (
      <section aria-labelledby="about-title" className="py-4 flex-1 h-full">
        <section className={glassSurfaceCard("p-4")}>
          <div className="flex justify-between items-center pb-[25px]">
            <h2 className="text-sm leading-5">{data.TabNotifications.Heading}</h2>
          </div>

          <div className="p-2 pt-0">
            {data.TabNotifications.Accordions.map((accordion, i) => {
              return (
                <Fragment key={i}>
                  <Accordion title={accordion.Heading} group={"accordions"} icon={accordion.Icon}>
                    <div className="grid gap-4 mb-3">
                      {accordion.Items.map((item, j) => {
                        return (
                          <label
                            key={j}
                            htmlFor={item.HtmlName}
                            className="flex w-full h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-neutral-200 dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-black"
                          >
                            <span className="inline-flex items-center gap-2.5 text-sm2">
                              <SmartIcon icon={item.Icon} />
                              {item.Label}
                            </span>
                            <Switch onClick={onSwitched} id={item.HtmlName} name={item.HtmlName} className="w-12 h-6 scale-[0.9]" />
                          </label>
                        );
                      })}
                    </div>
                  </Accordion>
                  <Seperator className="last:hidden" />
                </Fragment>
              );
            })}
          </div>
        </section>
      </section>
    );
  };

  const passwordTab = () => {
    return (
      <section aria-labelledby="reviews-title" className="py-4">
        <section className={glassSurfaceCard("p-4")}>
          <div className="flex justify-between items-center pb-[25px]">
            <h2 className="text-sm leading-5">{data.TabPassword.Heading}</h2>
          </div>

          <form onSubmit={(e) => e.preventDefault()} className="grid gap-6 p-2">
            {data.TabPassword.Inputs.map((input, i) => {
              return <PasswordField labelText={input.Label} className="bg-container" key={i} htmlFor={input.HtmlName ?? ""} placeholder={input.Placeholder} autoComplete={input.AutoComplete} />;
            })}

            {data.TabPassword.Rules.map((rule, i) => {
              return (
                <section key={i} className="bg-background rounded-normal p-4 text-xs flex flex-col gap-2 font-light">
                  <h6 className="text-sm mb-2">{rule.Heading}</h6>
                  {rule.Items.map((item, i) => {
                    return <li key={i}>{item}</li>;
                  })}
                </section>
              );
            })}

            <Button className="mt-4">
              <div className="flex items-center justify-center gap-1">
                <TickCircle className="stroke-white" size={20} />
                <span className="mt-0.5">{data.TabPassword.ButtonSubmit}</span>
              </div>
            </Button>
          </form>
        </section>
      </section>
    );
  };

  const authenticatorTab = () => {
    return (
      <section aria-labelledby="reviews-title" className="py-4">
        <div className={glassSurfaceCard("p-4")}>
          <div className="pb-4">
            <h2 className="text-sm leading-5">{data.TabAuthenticator.Heading}</h2>
            <p className="text-xs mt-3 text-disabled-text font-light">{data.TabAuthenticator.Description}</p>
          </div>

          <Seperator />

          <div className="p-2">
            <div className="mt-14 bg-blue-100 p-4 place-self-center rounded-full">
              <Key size={32} className="stroke-blue-500" />
            </div>
            <p className="text-sm2 mt-4 font-light place-self-center">{data.TabAuthenticator.Tip}</p>

            <div className="place-self-center mt-2">
              <Button className="mt-4 px-14 py-2">
                <div className="flex items-center justify-center gap-1">
                  <TickCircle className="stroke-white" size={20} />
                  <span className="mt-0.5">{data.TabAuthenticator.ButtonSubmit}</span>
                </div>
              </Button>
            </div>

            {data.TabAuthenticator.Guides.map((guide, i) => {
              return (
                <section key={i} className="bg-background rounded-normal mt-14 p-4 text-xs flex flex-col gap-2 font-light">
                  <h6 className="text-sm">{guide.Heading}</h6>
                  <p className="text-disabled-text">{guide.Description}</p>
                  {guide.Items.map((item, i) => {
                    return (
                      <div key={i}>
                        <div className="ml-2 mt-2 bg-blue-100 inline-block size-6 text-center pt-[5px] pr-px text-blue-500 rounded-full">{item.Mark}</div>
                        <span>{item.Label}</span>
                      </div>
                    );
                  })}

                  {guide.Notes.map((note, i) => {
                    return (
                      <div key={i} className="mt-4 p-3 text-yellow-800 rounded-lg bg-yellow-50 border border-solid border-yellow-200">
                        {note}
                      </div>
                    );
                  })}
                </section>
              );
            })}
          </div>
        </div>
      </section>
    );
  };

  return (
    <div className="overflow-y-auto h-full noscrollbar flex flex-col gap-6">
      <div className="grid grid-cols-3 items-center">
        <span></span>
        <h1 className="text-sm2 place-self-center font-medium">{data.Heading}</h1>
        <ArrowLeft
          className="cursor-pointer place-self-end"
          size="24"
          color="currentColor"
          onClick={() => {
            router.back();
          }}
        />
      </div>

      <section className={glassSurfaceCard("p-4")}>
        <div className="flex justify-between items-center pb-4">
          <h2 className="text-sm leading-5">{data.StatisticalParticipation.Heading}</h2>
          <Switch
            checked={statisticalParticipation}
            onCheckedChange={handleStatisticalToggle}
            id={data.StatisticalParticipation.HtmlName}
            name={data.StatisticalParticipation.HtmlName}
            className="w-12 h-6 scale-[0.9]"
          />
        </div>
        <p className="text-xs text-disabled-text font-light">{data.StatisticalParticipation.Description}</p>
      </section>
    </div>
  );
}

export default UserSettingsIndex;