import "@shoelace-style/shoelace/dist/components/alert/alert.js";
import "@shoelace-style/shoelace/dist/components/button/button.js";
import "@shoelace-style/shoelace/dist/components/card/card.js";
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
import "@shoelace-style/shoelace/dist/components/icon/icon.js";
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";

import "./shoelace.js";

import SlDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";

import { notify, notifyError } from "./alert.js";
import { getResponseError } from "./ajaxUtil.js";

const dlgDelete = document.getElementById("confirm-delete") as SlDialog;

const confirmDelete = (
    id: string,
    amount: string,
    date: string,
    vendor: string,
) => {
    dlgDelete.querySelector(".amount")!.textContent = amount;
    dlgDelete.querySelector(".date")!.textContent = date;
    dlgDelete.querySelector(".receipt-id")!.textContent = id;
    dlgDelete.querySelector(".vendor")!.textContent = vendor;
    dlgDelete.show();
};

const deleteReceipt = async (receiptId: string): Promise<boolean> => {
    let r: Response;
    try {
        r = await fetch(`/receipts/${receiptId}`, { method: "DELETE" });
    } catch (e) {
        notifyError(e.toString());
        return false;
    }
    if (r.ok) {
        notify(`Deleted receipt ${receiptId}`);
        return true;
    } else {
        const err = await getResponseError(r);
        notifyError(err);
        return false;
    }
};

document.querySelectorAll(".receipt-card").forEach((card) => {
    const amount = card.querySelector(".amount")!.textContent!;
    const date = (card.querySelector(".date") as HTMLElement).dataset.date!;
    const vendor = card.querySelector(".vendor")!.textContent!;
    const btn = card.querySelector("sl-icon-button[name='trash']");
    if (btn) {
        btn.addEventListener("click", (evt) => {
            evt.preventDefault();
            confirmDelete(
                (card as HTMLElement).dataset.receiptId!,
                amount,
                date,
                vendor,
            );
        });
    }
});

dlgDelete
    .querySelector("sl-button[aria-label='No']")!
    .addEventListener("click", () => {
        dlgDelete.hide();
    });

dlgDelete
    .querySelector("sl-button[aria-label='Yes']")!
    .addEventListener("click", async () => {
        dlgDelete.hide();
        const receiptId = dlgDelete.querySelector(".receipt-id")?.textContent;
        if (receiptId) {
            const success = await deleteReceipt(receiptId);
            if (success) {
                const card = document.querySelector(
                    `sl-card[data-receipt-id="${receiptId}"]`,
                ) as HTMLElement;
                card.style.opacity = "0";
                setTimeout(() => {
                    card.remove();
                }, 1000);
            }
        }
    });