import SettingsLayout from "@/layouts/SettingsLayout";
import { ReactElement, useState } from "react";
import { toast } from "react-hot-toast";
import TextInput from "@/components/TextInput";
import { useTranslation } from "next-i18next";
import getServerSideProps from "@/lib/client/getServerSideProps";
import { useUpdateUser, useUser } from "@linkwarden/router/user";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { NextPageWithLayout } from "../_app";

const Page: NextPageWithLayout = () => {
  const { t } = useTranslation();

  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [submitLoader, setSubmitLoader] = useState(false);
  const { data: account } = useUser();
  const updateUser = useUpdateUser();

  const submit = async () => {
    if (!account?.id) return;

    if (newPassword === "" || oldPassword === "") {
      return toast.error(t("fill_all_fields"));
    }
    if (newPassword.length < 8) return toast.error(t("password_length_error"));

    setSubmitLoader(true);

    const load = toast.loading(t("applying_settings"));

    await updateUser.mutateAsync(
      {
        id: account.id,
        username: account.username,
        email: account.email,
        newPassword,
        oldPassword,
      },
      {
        onSettled: (data, error) => {
          setSubmitLoader(false);
          toast.dismiss(load);

          if (error) {
            toast.error(error.message);
          } else {
            setNewPassword("");
            setOldPassword("");

            toast.success(t("settings_applied"));
          }
        },
      }
    );
  };

  return (
    <>
      <div className="flex items-center gap-2">
        <i className="bi-lock text-primary text-2xl"></i>
        <p className="capitalize text-3xl font-thin inline">
          {t("change_password")}
        </p>
      </div>

      <Separator className="my-3" />

      <p className="mb-3">{t("password_change_instructions")}</p>
      <div className="w-full flex flex-col gap-2 justify-between max-w-screen-sm">
        <p>{t("old_password")}</p>

        <TextInput
          value={oldPassword}
          className="bg-base-200"
          onChange={(e) => setOldPassword(e.target.value)}
          placeholder="••••••••••••••"
          type="password"
        />

        <p className="mt-3">{t("new_password")}</p>

        <TextInput
          value={newPassword}
          className="bg-base-200"
          onChange={(e) => setNewPassword(e.target.value)}
          placeholder="••••••••••••••"
          type="password"
        />

        <Button
          onClick={submit}
          disabled={submitLoader || !oldPassword || !newPassword}
          variant="accent"
          className="mt-3 w-full sm:w-fit"
        >
          {t("save_changes")}
        </Button>
      </div>
    </>
  );
};

Page.getLayout = function getLayout(page: ReactElement) {
  return <SettingsLayout>{page}</SettingsLayout>;
};

export default Page;

export { getServerSideProps };
