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

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

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

    return (
        <>
            <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}`}
                    />
                </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>
                <button
                    aria-label="Refresh image"
                    class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
                    onClick={() => setIsRefreshOpen(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>

            <Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
                <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 Refresh
                        </Dialog.Title>
                        <Dialog.Description class="mb-4">
                            Are you sure you want to refresh 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-blue-600 text-white rounded hover:bg-blue-700"
                                onClick={() => {
                                    props.onRefresh?.(props.ID);
                                    setIsRefreshOpen(false);
                                }}
                            >
                                Confirm
                            </button>
                        </div>
                    </Dialog.Content>
                </Dialog.Portal>
            </Dialog.Root>
        </>
    );
};

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

    return (
        <>
            <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}`}
                    />
                </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>
                <button
                    aria-label="Refresh image"
                    class="absolute top-2 right-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-blue-600"
                    onClick={() => setIsRefreshOpen(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>

            <Dialog.Root open={isRefreshOpen()} onOpenChange={setIsRefreshOpen}>
                <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 Refresh
                        </Dialog.Title>
                        <Dialog.Description class="mb-4">
                            Are you sure you want to refresh 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-blue-600 text-white rounded hover:bg-blue-700"
                                onClick={() => {
                                    props.onRefresh?.(props.ID);
                                    setIsRefreshOpen(false);
                                }}
                            >
                                Confirm
                            </button>
                        </div>
                    </Dialog.Content>
                </Dialog.Portal>
            </Dialog.Root>
        </>
    );
};