"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { GitBranch, Pencil, RefreshCw, Type } from "lucide-react";
import { useEditContext } from "./client/editContext";
import { CopyButton } from "../components/ui/copy-button";
import { Section } from "./ui/Section";
import { SimpleIconButton } from "./ui/SimpleIconButton";
import { changeTemplateCommand, uncloneItemCommand, } from "./commands/itemCommands";
import { IconSelectorDialog } from "./ui/IconSelectorDialog";
import { InternalLink } from "./ui/InternalLink";
import { ItemNameDialog, } from "./ui/ItemNameDialogNew";
import { cn } from "../lib/utils";
import { GUID_REGEX_CONTAINS } from "./utils";
const DISPLAY_NAME_FIELD_ID = "b5e02ad9-d56f-4c41-a065-a133db87bdeb";
const SOURCE_FIELD_ID = "1dcc237e-d653-45b0-9a45-89ff6a9036a3";
export function ItemInfo({ item }) {
    if (!item?.fields)
        return;
    const editContext = useEditContext();
    const [showIconDialog, setShowIconDialog] = useState(false);
    // Find the __Icon field
    const iconField = item.fields.find((field) => field.name === "__Icon" || field.id === "__Icon");
    const sourceField = item.fields.find((field) => field.name === "__Source" || field.id?.toLowerCase() === SOURCE_FIELD_ID);
    const sourceRawValue = sourceField?.rawValue?.trim() || "";
    const sourceMatch = sourceRawValue.match(GUID_REGEX_CONTAINS);
    const sourceItemId = sourceMatch?.[0]?.replace(/[{}()]/g, "");
    const handleIconClick = () => {
        if (item.canWriteItem) {
            setShowIconDialog(true);
        }
    };
    const handleIconSelected = async (selectedIconPath) => {
        setShowIconDialog(false);
        if (selectedIconPath && iconField && editContext) {
            await editContext.operations.editField({
                field: {
                    item: item.descriptor,
                    fieldId: iconField.id,
                },
                rawValue: selectedIconPath,
                refresh: "immediate",
            });
        }
    };
    const handleDisplayNameEdit = async () => {
        if (!editContext)
            return;
        const nextDisplayName = await editContext.openDialog(ItemNameDialog, {
            name: item.displayName || "",
            title: "Edit Display Name",
            message: "Enter a display name for the item:",
            headerIcon: _jsx(Type, { strokeWidth: 1 }),
            validateAsItemName: false,
            allowEmpty: true,
        });
        if (nextDisplayName === null) {
            return;
        }
        const trimmedDisplayName = nextDisplayName.trim();
        const currentDisplayName = (item.displayName || "").trim();
        if (trimmedDisplayName === currentDisplayName)
            return;
        try {
            await editContext.operations.editField({
                field: {
                    item: item.descriptor,
                    fieldId: DISPLAY_NAME_FIELD_ID,
                },
                rawValue: trimmedDisplayName,
                refresh: "immediate",
            });
        }
        catch (error) {
            console.error("Failed to update display name", error);
        }
    };
    function formatRow(label, value) {
        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium", children: label }), _jsx("div", { children: value })] }));
    }
    return (_jsxs("div", { className: "border-border-default border-b", children: [showIconDialog && editContext && (_jsx(IconSelectorDialog, { currentIconPath: iconField?.rawValue || item.icon, onClose: handleIconSelected })), _jsxs("div", { className: "my-2 flex items-center px-3 py-2", children: [_jsx("img", { src: item.largeIcon, alt: "Icon", "data-testid": "item-icon", className: cn("mr-2", item.canWriteItem &&
                            "cursor-pointer transition-opacity hover:opacity-70"), style: { height: "32px", width: "32px" }, onClick: handleIconClick, title: item.canWriteItem ? "Click to change icon" : undefined }), _jsxs("h2", { className: "text-l group flex items-center gap-1 font-medium", children: [item.name, _jsx(SimpleIconButton, { onClick: () => {
                                    editContext?.executeCommand({
                                        command: editContext.configuration.commands.renameItem,
                                        data: { items: [item] },
                                    });
                                }, icon: _jsx(Pencil, { size: 14, strokeWidth: 1 }), label: "Rename", className: "opacity-0 transition-opacity group-hover:opacity-100" })] })] }), _jsx(Section, { title: "Info", children: _jsxs("div", { className: "text-neutral-grey-100 grid grid-cols-[min-content_1fr] gap-3 text-xs font-light", children: [_jsx("div", { className: "font-medium whitespace-nowrap", children: "Display name:" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { children: item.displayName || item.name }), item.canWriteItem && editContext && (_jsx(SimpleIconButton, { onClick: () => {
                                        void handleDisplayNameEdit();
                                    }, icon: _jsx(Pencil, { size: 14, strokeWidth: 1 }), label: "Edit display name", className: "p-0!" }))] }), _jsx("div", { className: "font-medium", "data-testid": "item-info-id-label", children: "ID:" }), _jsxs("div", { className: "flex items-center gap-1", children: [item.id, " ", _jsx(CopyButton, { textToCopy: item.id, iconOnly: true })] }), _jsx("div", { className: "font-medium", "data-testid": "item-info-path-label", children: "Path:" }), _jsxs("div", { className: "flex items-center gap-1", children: [item.path, " ", _jsx(CopyButton, { textToCopy: item.path, iconOnly: true })] }), sourceRawValue && (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium whitespace-nowrap", "data-testid": "item-info-clone-source-label", children: "Cloned from:" }), _jsxs("div", { className: "flex flex-wrap items-center gap-1", "data-testid": "item-info-clone-source-value", children: [sourceItemId ? (_jsx(InternalLink, { "data-testid": "item-info-clone-source-link", item: {
                                                id: sourceItemId,
                                                language: item.language,
                                                version: 0,
                                            }, children: sourceItemId })) : (_jsx("span", { children: sourceRawValue })), _jsx(CopyButton, { textToCopy: sourceItemId || sourceRawValue, iconOnly: true }), item.canWriteItem && editContext && sourceField && (_jsx(SimpleIconButton, { "data-testid": "item-info-unclone-button", onClick: () => {
                                                editContext.executeCommand({
                                                    command: uncloneItemCommand,
                                                    data: { items: [item] },
                                                });
                                            }, icon: _jsx(GitBranch, { size: 14, strokeWidth: 1 }), label: "Unclone item", className: "p-0!" }))] })] })), _jsx("div", { className: "font-medium", children: "Language:" }), _jsx("div", { children: item.language }), _jsx("div", { className: "font-medium", children: "Version:" }), _jsx("div", { children: item.versions > 0 ? item.version : "No versions" }), _jsx("div", { className: "font-medium", children: "Template:" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs(InternalLink, { item: { id: item.templateId, language: "en", version: 0 }, children: [item.templateName, " (", item.templateId, ")"] }), _jsx(CopyButton, { textToCopy: item.templateId, iconOnly: true }), item.canWriteItem && (_jsx(SimpleIconButton, { onClick: () => {
                                        editContext?.executeCommand({
                                            command: changeTemplateCommand,
                                            data: { items: [item] },
                                        });
                                    }, icon: _jsx(RefreshCw, { size: 14, strokeWidth: 1 }), label: "Change Template", className: "p-0!" }))] }), item.masterLanguages &&
                            formatRow("Master languages", item.masterLanguages.join(", ")), item.translations && (_jsxs(_Fragment, { children: [_jsx("div", { className: "font-medium", children: "Languages" }), _jsx("div", { children: item.translations?.join(", ") })] })), item.customProperties &&
                            item.customProperties.length > 0 &&
                            item.customProperties.map((prop) => (_jsxs("div", { className: "contents", children: [_jsxs("div", { className: "font-medium whitespace-nowrap", children: [prop.label || prop.key, ":"] }), _jsxs("div", { className: "flex items-center gap-1", children: [prop.value, _jsx(CopyButton, { textToCopy: prop.value, iconOnly: true })] })] }, prop.key)))] }) })] }));
}
//# sourceMappingURL=ItemInfo.js.map