import { Component, createResource, createSignal, Suspense } from "solid-js";
import { base, getAccessToken } from "../../network";
import { A } from "@solidjs/router";
import { Dialog } from "@kobalte/core";

type ImageComponentProps = {
    ID: string;
    onDelete: (id: string) => void;
}

export const ImageComponent: Component<ImageComponentProps> = (props) => {
    const [isOpen, setIsOpen] = createSignal(false);

    const [accessToken] = createResource(getAccessToken);

    return (
        <Suspense fallback={<></>}>
            <div class="relative w-full flex justify-center h-[300px]">
                <A href={`/image/${props.ID}`} class="flex w-full">
                    <img
                        class="flex w-full object-cover rounded-xl"
                        src={`${base}/images/${props.ID}?token=${accessToken()}`}
                    />
                </A>
                <button
                    aria-label="Delete image"
                    class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
                    onClick={() => setIsOpen(true)}
                >
                    ×
                </button>
            </div>

            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
                <Dialog.Portal>
                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
                        <Dialog.Title class="text-lg font-bold mb-2">
                            Confirm Delete
                        </Dialog.Title>
                        <Dialog.Description class="mb-4">
                            Are you sure you want to delete this image?
                        </Dialog.Description>
                        <div class="flex justify-end gap-2">
                            <Dialog.CloseButton>
                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
                                    Cancel
                                </button>
                            </Dialog.CloseButton>
                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
                                Confirm
                            </button>
                        </div>
                    </Dialog.Content>
                </Dialog.Portal>
            </Dialog.Root>
        </Suspense>
    );
};

// TODO: these two components are basically identical
// merge the fuckers

export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
    const [isOpen, setIsOpen] = createSignal(false);

    const [accessToken] = createResource(getAccessToken);

    return (
        <Suspense>
            <div class="relative w-full flex justify-center">
                <A href={`/image/${props.ID}`} class="flex w-full">
                    <img
                        class="flex w-full object-cover rounded-xl"
                        src={`${base}/images/${props.ID}?token=${accessToken()}`}
                    />
                </A>
                <button
                    aria-label="Delete image"
                    class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
                    onClick={() => setIsOpen(true)}
                >
                    ×
                </button>
            </div>

            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
                <Dialog.Portal>
                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
                        <Dialog.Title class="text-lg font-bold mb-2">
                            Confirm Delete
                        </Dialog.Title>
                        <Dialog.Description class="mb-4">
                            Are you sure you want to delete this image?
                        </Dialog.Description>
                        <div class="flex justify-end gap-2">
                            <Dialog.CloseButton>
                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
                                    Cancel
                                </button>
                            </Dialog.CloseButton>
                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
                                Confirm
                            </button>
                        </div>
                    </Dialog.Content>
                </Dialog.Portal>
            </Dialog.Root>
        </Suspense>
    );
};