export const MENU_CONTAINER_CLASS = "vtable-context-menu-container";

export const MENU_ITEM_CLASS = "vtable-context-menu-item";

export const MENU_ITEM_DISABLED_CLASS = "vtable-context-menu-item-disabled";

export const MENU_ITEM_SEPARATOR_CLASS = "vtable-context-menu-item-separator";

export const MENU_ITEM_SUBMENU_CLASS = "vtable-context-menu-item-submenu";

export const MENU_STYLES = {
    menuContainer: {
        position: "absolute",
        backgroundColor: "#ffffff",
        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
        borderRadius: "4px",
        padding: "5px 0",
        zIndex: 1e3,
        minWidth: "180px",
        maxHeight: "300px",
        overflowY: "auto",
        fontSize: "12px"
    },
    menuItem: {
        padding: "6px 20px",
        cursor: "pointer",
        whiteSpace: "nowrap",
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between"
    },
    menuItemHover: {
        backgroundColor: "#f5f5f5"
    },
    menuItemDisabled: {
        opacity: .5,
        cursor: "not-allowed"
    },
    menuItemSeparator: {
        height: "1px",
        backgroundColor: "#e0e0e0",
        margin: "5px 0"
    },
    menuItemIcon: {
        marginRight: "8px",
        width: "16px",
        height: "16px",
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center"
    },
    menuItemText: {
        flex: 1
    },
    menuItemShortcut: {
        marginLeft: "20px",
        color: "#999",
        fontSize: "11px"
    },
    submenuArrow: {
        marginLeft: "5px",
        fontSize: "12px",
        color: "#666"
    },
    submenuContainer: {
        position: "absolute",
        left: "100%",
        top: "0",
        backgroundColor: "#ffffff",
        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
        borderRadius: "4px",
        padding: "5px 0",
        zIndex: 1001,
        minWidth: "180px",
        fontSize: "12px"
    },
    inputContainer: {
        padding: "8px 12px",
        display: "flex",
        alignItems: "center"
    },
    inputLabel: {
        marginRight: "8px",
        whiteSpace: "nowrap"
    },
    inputField: {
        width: "60px",
        padding: "4px",
        border: "1px solid #ddd",
        borderRadius: "3px"
    },
    buttonContainer: {
        display: "flex",
        justifyContent: "flex-end",
        padding: "5px 12px"
    },
    button: {
        padding: "4px 8px",
        backgroundColor: "#1890ff",
        color: "white",
        border: "none",
        borderRadius: "3px",
        cursor: "pointer",
        fontSize: "12px"
    }
};

export function createElement(tag, className, styles) {
    const element = document.createElement(tag);
    return className && (element.className = className), styles && applyStyles(element, styles), 
    element;
}

export function applyStyles(element, styles) {
    Object.entries(styles).forEach((([key, value]) => {
        element.style[key] = value;
    }));
}

export function createIcon(iconName) {
    const iconElement = createElement("span");
    switch (iconName) {
      case "copy":
        iconElement.innerHTML = "📋";
        break;

      case "paste":
        iconElement.innerHTML = "📌";
        break;

      case "cut":
        iconElement.innerHTML = "✂️";
        break;

      case "delete":
        iconElement.innerHTML = "🗑️";
        break;

      case "insert":
        iconElement.innerHTML = "➕";
        break;

      case "sort":
        iconElement.innerHTML = "🔃";
        break;

      case "protect":
        iconElement.innerHTML = "🔒";
        break;

      case "hide":
        iconElement.innerHTML = "👁️";
        break;

      case "freeze":
        iconElement.innerHTML = "❄️";
        break;

      case "up-arrow":
        iconElement.innerHTML = "🔼";
        break;

      case "down-arrow":
        iconElement.innerHTML = "🔽";
        break;

      case "left-arrow":
        iconElement.innerHTML = "◀️";
        break;

      case "right-arrow":
        iconElement.innerHTML = "▶️";
        break;

      default:
        iconElement.innerHTML = "•";
    }
    return applyStyles(iconElement, MENU_STYLES.menuItemIcon), iconElement;
}

export function createNumberInputItem(label, defaultValue = 1, iconName, callback) {
    const container = createElement("div");
    if (applyStyles(container, MENU_STYLES.inputContainer), iconName) {
        const icon = createIcon(iconName);
        container.appendChild(icon);
    }
    const labelElement = createElement("label");
    labelElement.textContent = label, applyStyles(labelElement, MENU_STYLES.inputLabel), 
    container.appendChild(labelElement);
    const input = createElement("input");
    input.type = "number", input.min = "1", input.value = defaultValue.toString(), applyStyles(input, MENU_STYLES.inputField), 
    container.appendChild(input);
    const wrapper = createElement("div");
    return wrapper.appendChild(container), wrapper;
}
//# sourceMappingURL=styles.js.map