import { useAsyncFn } from "react-use";

import { deleteUser } from "@/backend/accounts/user";
import { Button } from "@/components/Button";
import { SolidSettingsCard } from "@/components/layout/SettingsCard";
import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
import { Heading2, Heading3, Paragraph } from "@/components/utils/Text";
import { useAuthData } from "@/hooks/auth/useAuthData";
import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
import { useAuthStore } from "@/stores/auth";

export function AccountActionsPart() {
  const url = useBackendUrl();
  const account = useAuthStore((s) => s.account);
  const { logout } = useAuthData();
  const deleteModal = useModal("account-delete");

  const [deleteResult, deleteExec] = useAsyncFn(async () => {
    if (!account) return;
    await deleteUser(url, account);
    await logout();
    deleteModal.hide();
  }, [logout, account, url, deleteModal.hide]);

  if (!account) return null;

  return (
    <div>
      <Heading2 border>Actions</Heading2>
      <SolidSettingsCard
        paddingClass="px-6 py-12"
        className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12"
      >
        <div>
          <Heading3>Delete account</Heading3>
          <p className="text-type-text">
            This action is irreversible. All data will be deleted and nothing
            can be recovered.
          </p>
        </div>
        <div className="flex justify-start lg:justify-end items-center">
          <Button
            theme="danger"
            loading={deleteResult.loading}
            onClick={deleteModal.show}
          >
            Delete account
          </Button>
        </div>
      </SolidSettingsCard>
      <Modal id={deleteModal.id}>
        <ModalCard>
          <Heading2 className="!mt-0">Are you sure?</Heading2>
          <Paragraph>
            Are you sure you want to delete your account? All your data will be
            lost!
          </Paragraph>
          <Button
            theme="danger"
            loading={deleteResult.loading}
            onClick={deleteExec}
          >
            Delete account
          </Button>
        </ModalCard>
      </Modal>
    </div>
  );
}