import { useState } from "react";
import type { ChangeEvent } from "react";

import { ImagePlaceholder } from "@/components/Placeholders";
import type { PortalAsset } from "@/types";
import addImageIcon from "../../images/icons/add-image-icon.svg";

interface ImagePickerProps {
    accept?: string;
    assets: PortalAsset[];
    isBusy?: boolean;
    label: string;
    multiple?: boolean;
    /** Omit to make the picker add-only. */
    onRemove?: (assetId: string) => void;
    onSelect: (files: File[]) => void;
    size?: "sm" | "md";
}

const ImagePicker = ({
    accept = "image/*",
    assets,
    isBusy = false,
    label,
    multiple = false,
    onRemove,
    onSelect,
    size = "sm",
}: ImagePickerProps) => {
    // Removing an image is destructive and the thumbnails are small, so the ×
    // asks once rather than deleting on a stray click.
    const [confirmingId, setConfirmingId] = useState<string | null>(null);

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const files = Array.from(event.target.files ?? []);

        if (files.length > 0) {
            onSelect(files);
        }

        event.target.value = "";
    };

    const remove = (assetId: string) => {
        setConfirmingId(null);
        onRemove?.(assetId);
    };

    return (
        <div className="image-picker">
            <div className="media-row d-flex flex-wrap gap-3">
                {assets.map((asset) => (
                    <div className="image-picker__item" key={asset.id}>
                        {asset.src ? (
                            <img
                                className={`image-preview image-preview--${size}`}
                                src={asset.src}
                                alt={asset.label}
                            />
                        ) : (
                            <ImagePlaceholder label={asset.label} size={size} />
                        )}

                        {onRemove ? (
                            confirmingId === asset.id ? (
                                <div className="image-picker__confirm">
                                    <button
                                        className="image-picker__confirm-yes"
                                        disabled={isBusy}
                                        onClick={() => remove(asset.id)}
                                        type="button"
                                    >
                                        Remove
                                    </button>
                                    <button
                                        className="image-picker__confirm-no"
                                        onClick={() => setConfirmingId(null)}
                                        type="button"
                                    >
                                        Cancel
                                    </button>
                                </div>
                            ) : (
                                <button
                                    aria-label={`Remove ${asset.label}`}
                                    className="image-picker__remove"
                                    disabled={isBusy}
                                    onClick={() => setConfirmingId(asset.id)}
                                    type="button"
                                >
                                    &times;
                                </button>
                            )
                        ) : null}
                    </div>
                ))}

                <label
                    className={`image-picker__trigger image-picker__trigger--${size} d-inline-flex align-items-center justify-content-center btn btn-outline-secondary`}
                    aria-label={label}
                >
                    <img
                        className="portal-add-image-icon"
                        src={addImageIcon}
                        alt=""
                        aria-hidden="true"
                    />
                    <input
                        accept={accept}
                        multiple={multiple}
                        onChange={handleChange}
                        type="file"
                    />
                </label>
            </div>
        </div>
    );
};

export default ImagePicker;