"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { formatDate } from "../utils";
import { useEditContext } from "../client/editContext";
import { useEffect, useState } from "react";
export function Preview({ selectedImage }) {
    const editContext = useEditContext();
    const [fileInfo, setFileInfo] = useState({});
    useEffect(() => {
        async function fetchFileInfo() {
            if (!selectedImage || !editContext?.itemsRepository) {
                setFileInfo({});
                return;
            }
            try {
                const item = await editContext.itemsRepository.getItem({
                    id: selectedImage.id,
                    language: "en",
                    version: 0,
                });
                if (item) {
                    // Try to get file information from blob field or other fields
                    const blobField = item.fields?.find((f) => f.name === "Blob" || f.name === "blob" || f.type === "Attachment");
                    const fileNameField = item.fields?.find((f) => f.name === "File Name" || f.name === "FileName");
                    const extensionField = item.fields?.find((f) => f.name === "Extension" || f.name === "extension");
                    // Handle blob field value which might be an AttachmentValue object
                    const blobValue = blobField?.value;
                    const fileName = fileNameField?.value ||
                        blobValue?.fileName ||
                        (typeof blobValue === "object" && blobValue !== null
                            ? blobValue.fileName
                            : undefined) ||
                        selectedImage.name;
                    const extension = extensionField?.value ||
                        blobValue?.extension ||
                        (typeof blobValue === "object" && blobValue !== null
                            ? blobValue.extension
                            : undefined) ||
                        (fileName?.includes(".") ? fileName.split(".").pop() : undefined);
                    setFileInfo({ fileName, extension });
                }
            }
            catch (error) {
                // If fetching fails, try to extract extension from name
                const extension = selectedImage.name?.includes(".")
                    ? selectedImage.name.split(".").pop()
                    : undefined;
                setFileInfo({ fileName: selectedImage.name, extension });
            }
        }
        fetchFileInfo();
    }, [selectedImage?.id, editContext?.itemsRepository]);
    if (!selectedImage) {
        return (_jsxs("div", { className: "text-neutral-grey-50 flex h-full flex-col items-center justify-center p-6 text-center", children: [_jsx("div", { className: "bg-neutral-grey-5 mb-4 flex h-16 w-16 items-center justify-center rounded-full", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-40", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }), _jsx("circle", { cx: "9", cy: "9", r: "2" }), _jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })] }) }), _jsx("p", { className: "text-sm font-medium", children: "No media selected" }), _jsx("p", { className: "mt-1 text-xs", children: "Select an item to see its details and preview" })] }));
    }
    const MetadataRow = ({ label, value, icon, }) => (_jsxs("div", { className: "border-border-default flex flex-col gap-1 border-b py-2 last:border-0", children: [_jsx("span", { className: "text-neutral-grey-50 text-[10px] font-semibold tracking-wider", children: label }), _jsxs("div", { className: "flex items-center gap-2", children: [icon && _jsx("div", { className: "text-neutral-grey-50", children: icon }), _jsx("span", { className: "text-neutral-grey-100 truncate text-xs font-medium", children: value })] })] }));
    return (_jsxs("div", { className: "flex h-full flex-col gap-0", children: [_jsxs("div", { className: "bg-neutral-grey-5 relative flex aspect-square w-full items-center justify-center border-b p-4", children: [_jsx("img", { src: selectedImage?.previewUrl, className: "max-h-full max-w-full rounded object-contain shadow-sm", fetchPriority: "high" }), _jsx("div", { className: "absolute top-2 right-2", children: _jsx("div", { className: "badge-pad-sm text-neutral-grey-50 rounded border bg-white/80 text-[10px] font-bold shadow-xs backdrop-blur-sm", children: fileInfo.extension || "FILE" }) })] }), _jsxs("div", { className: "flex flex-col gap-1 p-4", children: [_jsx("h3", { className: "text-neutral-grey-100 mb-2 truncate text-sm font-bold", title: selectedImage.name, children: selectedImage.name }), _jsxs("div", { className: "border-border-default rounded-lg border bg-white p-3 shadow-xs", children: [_jsx(MetadataRow, { label: "File Name", value: fileInfo.fileName || selectedImage.name }), selectedImage.width && selectedImage.height && (_jsx(MetadataRow, { label: "Dimensions", value: `${selectedImage.width} × ${selectedImage.height} px` })), selectedImage.size && (_jsx(MetadataRow, { label: "Size", value: `${Math.round(selectedImage.size / 1024)} KB` })), _jsx(MetadataRow, { label: "Last Modified", value: (() => {
                                    const formatISODate = (dateStr) => {
                                        if (dateStr.match(/^\d{8}T\d{6}Z$/)) {
                                            return dateStr.replace(/(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})Z/, "$1-$2-$3T$4:$5:$6Z");
                                        }
                                        return dateStr;
                                    };
                                    const formattedDateStr = formatISODate(selectedImage.updated || "");
                                    const date = new Date(formattedDateStr);
                                    return isNaN(date.getTime()) ? "N/A" : formatDate(date);
                                })() }), _jsx(MetadataRow, { label: "Updated By", value: selectedImage.updatedBy || "System" })] })] })] }));
}
//# sourceMappingURL=Preview.js.map