"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeader = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const colors_1 = require("../../helpers/colors");
const InlineAction_1 = require("../InlineAction");
const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
const styles_1 = require("./styles");
const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
exports.InspectorSectionHeader = InspectorSectionHeader;
const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
exports.InspectorSectionDivider = InspectorSectionDivider;
const backIcon = {
    alignItems: 'center',
    display: 'flex',
    height: 12,
    justifyContent: 'center',
    width: 12,
};
const BackChevron = ({ color }) => {
    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: backIcon, children: jsx_runtime_1.jsx("path", { d: "M6 1L2 6L6 11", fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));
};
const InspectorBackHeader = ({ children, disabled, onClick, title }) => {
    return (jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: disabled, onClick: onClick, title: title, renderAction: (color) => jsx_runtime_1.jsx(BackChevron, { color: color }) }), children] }) }) }));
};
exports.InspectorBackHeader = InspectorBackHeader;
const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
exports.InspectorMessage = InspectorMessage;
const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, children: [
        jsx_runtime_1.jsx("div", { style: styles_1.detailLabel, children: label }), jsx_runtime_1.jsx("div", { style: styles_1.detailValue, children: children })
    ] }));
exports.InspectorDetailRow = InspectorDetailRow;
const inlineLabelButton = {
    alignItems: 'center',
    appearance: 'none',
    backgroundColor: colors_1.TRANSPARENT,
    border: 'none',
    boxSizing: 'border-box',
    color: colors_1.LIGHT_TEXT,
    cursor: 'default',
    display: 'flex',
    fontFamily: 'sans-serif',
    fontSize: 13,
    gap: 8,
    lineHeight: '18px',
    margin: 0,
    padding: `5px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
    textAlign: 'left',
    width: '100%',
};
const inlineLabelButtonDisabled = {
    ...inlineLabelButton,
    opacity: 0.35,
};
const inlineLabelText = {
    color: colors_1.LIGHT_TEXT,
    fontFamily: 'sans-serif',
    fontSize: 13,
    lineHeight: '18px',
};
const inlineLabelIcon = {
    alignItems: 'center',
    display: 'flex',
    flexShrink: 0,
    height: 13,
    justifyContent: 'center',
    width: 13,
};
const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
    const [hovered, setHovered] = react_1.default.useState(false);
    const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
    const buttonStyle = react_1.default.useMemo(() => ({
        ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
        color,
    }), [color, disabled]);
    const textStyle = react_1.default.useMemo(() => ({
        ...inlineLabelText,
        color,
    }), [color]);
    const onPointerEnter = react_1.default.useCallback(() => {
        setHovered(true);
    }, []);
    const onPointerLeave = react_1.default.useCallback(() => {
        setHovered(false);
    }, []);
    return (jsx_runtime_1.jsxs("button", { type: "button", disabled: disabled, style: buttonStyle, onClick: onClick, onPointerEnter: disabled ? undefined : onPointerEnter, onPointerLeave: onPointerLeave, children: [
            jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(color) }), jsx_runtime_1.jsx("span", { style: textStyle, children: children })
        ] }));
};
exports.InspectorInlineAction = InspectorInlineAction;
const InspectorDefaultPropsWarnings = ({ warnings }) => {
    return (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningMessages, children: warnings.map((warning) => (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: "compact", action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: styles_1.resolveLinkStyle, children: "Resolve" })) : null }, warning.id))) }));
};
exports.InspectorDefaultPropsWarnings = InspectorDefaultPropsWarnings;
