"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const constants_1 = require("../../constants.js");
const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
const cn_1 = require("../../utils/cn.js");
const b = (0, cn_1.editorCn)('view-switches');
/**
 * Available device viewport options
 * - Desktop: 100% width
 * - Tablet: 768px width
 * - Mobile: 375px width
 */
const DEVICE_OPTIONS = [
    {
        label: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Display }),
        value: '100%',
        ariaLabel: 'Desktop view',
    },
    {
        label: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Smartphone }),
        value: '768px',
        ariaLabel: 'Tablet view',
    },
    {
        label: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { width: 14, data: icons_1.Smartphone }),
        value: '375px',
        ariaLabel: 'Mobile view',
    },
];
const ViewSwitches = () => {
    const { zoom, setZoom, decreaseZoom, increaseZoom, deviceWidth, setDeviceWidth, togglePreviewMode, } = (0, useMainEditorStore_1.useMainEditorStore)();
    const store = (0, useMainEditorStore_1.useMainEditorStore)();
    const { undo, redo, historyFuture, historyPast } = store;
    const canUndo = historyPast.length > 0;
    const canRedo = historyFuture.length > 0;
    // Memoize zoom options to prevent unnecessary recalculations
    const zoomOptions = React.useMemo(() => constants_1.ZOOM_STEPS.map((step) => ({
        value: String(step),
        content: `${step}%`,
    })), []);
    // Memoize current zoom value for Select component
    const currentZoomValue = React.useMemo(() => [String(zoom)], [zoom]);
    // Create stable callback for zoom updates
    const handleZoomUpdate = React.useCallback((value) => {
        const newZoom = Number(Array.isArray(value) ? value[0] : value);
        if (!isNaN(newZoom) && constants_1.ZOOM_STEPS.includes(newZoom)) {
            setZoom(newZoom);
        }
    }, [setZoom]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [(0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.SquareDashed }) }), (0, jsx_runtime_1.jsxs)("div", { className: b('zoom'), role: "group", "aria-label": "Zoom controls", children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: decreaseZoom, "aria-label": "Decrease zoom", disabled: zoom <= Math.min(...constants_1.ZOOM_STEPS), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Minus }) }), (0, jsx_runtime_1.jsx)(uikit_1.Select, { className: b('zoom-select'), multiple: false, value: currentZoomValue, options: zoomOptions, onUpdate: handleZoomUpdate, "aria-label": "Select zoom level", width: "max" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: increaseZoom, "aria-label": "Increase zoom", disabled: zoom >= Math.max(...constants_1.ZOOM_STEPS), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: b('history-buttons'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", "aria-label": "Undo", onClick: undo, disabled: !canUndo, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowUturnCcwLeft }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", "aria-label": "Redo", onClick: redo, disabled: !canRedo, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowUturnCwRight }) })] })] }));
};
exports.default = React.memo(ViewSwitches);
//# sourceMappingURL=ViewSwitches.js.map
