import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ArrowUturnCcwLeft, ArrowUturnCwRight, Display, Minus, Plus, Smartphone, SquareDashed, } from '@gravity-ui/icons';
import { Button, Icon, SegmentedRadioGroup, Select } from '@gravity-ui/uikit';
import { ZOOM_STEPS } from "../../constants.js";
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { editorCn } from "../../utils/cn.js";
import './ViewSwitches.css';
const b = editorCn('view-switches');
/**
 * Available device viewport options
 * - Desktop: 100% width
 * - Tablet: 768px width
 * - Mobile: 375px width
 */
const DEVICE_OPTIONS = [
    {
        label: _jsx(Icon, { data: Display }),
        value: '100%',
        ariaLabel: 'Desktop view',
    },
    {
        label: _jsx(Icon, { data: Smartphone }),
        value: '768px',
        ariaLabel: 'Tablet view',
    },
    {
        label: _jsx(Icon, { width: 14, data: Smartphone }),
        value: '375px',
        ariaLabel: 'Mobile view',
    },
];
const ViewSwitches = () => {
    const { zoom, setZoom, decreaseZoom, increaseZoom, deviceWidth, setDeviceWidth, togglePreviewMode, } = useMainEditorStore();
    const store = 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(() => 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) && ZOOM_STEPS.includes(newZoom)) {
            setZoom(newZoom);
        }
    }, [setZoom]);
    return (_jsxs("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [_jsx(SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => (_jsx(SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), _jsx(Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: _jsx(Icon, { data: SquareDashed }) }), _jsxs("div", { className: b('zoom'), role: "group", "aria-label": "Zoom controls", children: [_jsx(Button, { view: "flat", onClick: decreaseZoom, "aria-label": "Decrease zoom", disabled: zoom <= Math.min(...ZOOM_STEPS), children: _jsx(Icon, { data: Minus }) }), _jsx(Select, { className: b('zoom-select'), multiple: false, value: currentZoomValue, options: zoomOptions, onUpdate: handleZoomUpdate, "aria-label": "Select zoom level", width: "max" }), _jsx(Button, { view: "flat", onClick: increaseZoom, "aria-label": "Increase zoom", disabled: zoom >= Math.max(...ZOOM_STEPS), children: _jsx(Icon, { data: Plus }) })] }), _jsxs("div", { className: b('history-buttons'), children: [_jsx(Button, { view: "flat", "aria-label": "Undo", onClick: undo, disabled: !canUndo, children: _jsx(Icon, { data: ArrowUturnCcwLeft }) }), _jsx(Button, { view: "flat", "aria-label": "Redo", onClick: redo, disabled: !canRedo, children: _jsx(Icon, { data: ArrowUturnCwRight }) })] })] }));
};
export default React.memo(ViewSwitches);
//# sourceMappingURL=ViewSwitches.js.map
