'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { ChevronIcon } from '../../../../icons/Chevron/index.js';
import { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js';
import { XIcon } from '../../../../icons/X/index.js';
import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
import { useTranslation } from '../../../../providers/Translation/index.js';
import { Popup, PopupList } from '../../../Popup/index.js';
import { PreviewFrameSizeInput } from '../SizeInput/index.js';
import './index.scss';
const baseClass = 'live-preview-toolbar-controls';
const zoomOptions = [
    50,
    75,
    100,
    125,
    150,
    200
];
export const ToolbarControls = ()=>{
    const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } = useLivePreviewContext();
    const { t } = useTranslation();
    const customOption = {
        label: t('general:custom'),
        value: 'custom'
    };
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: [
            breakpoints?.length > 0 && /*#__PURE__*/ _jsxDEV(Popup, {
                button: /*#__PURE__*/ _jsxDEV(React.Fragment, {
                    children: [
                        /*#__PURE__*/ _jsxDEV("span", {
                            children: breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label
                        }, void 0, false, {
                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                            lineNumber: 36,
                            columnNumber: 15
                        }, void 0),
                        /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                            className: `${baseClass}__chevron`
                        }, void 0, false, {
                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                            lineNumber: 39,
                            columnNumber: 15
                        }, void 0)
                    ]
                }, void 0, true, {
                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                    lineNumber: 35,
                    columnNumber: 13
                }, void 0),
                className: `${baseClass}__breakpoint`,
                horizontalAlign: "right",
                render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
                        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
                            children: [
                                breakpoints.map((bp)=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                        active: bp.name == breakpoint,
                                        onClick: ()=>{
                                            setBreakpoint(bp.name);
                                            close();
                                        },
                                        children: bp.label
                                    }, bp.name, false, {
                                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                                        lineNumber: 48,
                                        columnNumber: 19
                                    }, void 0)),
                                /* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */ breakpoint === 'custom' && /*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                    active: breakpoint == customOption.value,
                                    onClick: ()=>{
                                        setBreakpoint(customOption.value);
                                        close();
                                    },
                                    children: customOption.label
                                }, void 0, false, {
                                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                                    lineNumber: 61,
                                    columnNumber: 19
                                }, void 0)
                            ]
                        }, void 0, true, {
                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                            lineNumber: 46,
                            columnNumber: 15
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                        lineNumber: 45,
                        columnNumber: 13
                    }, void 0),
                showScrollbar: true,
                verticalAlign: "bottom"
            }, void 0, false, {
                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                lineNumber: 33,
                columnNumber: 9
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__device-size`,
                children: [
                    /*#__PURE__*/ _jsxDEV(PreviewFrameSizeInput, {
                        axis: "x"
                    }, void 0, false, {
                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                        lineNumber: 79,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("span", {
                        className: `${baseClass}__size-divider`,
                        children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                            lineNumber: 81,
                            columnNumber: 11
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                        lineNumber: 80,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV(PreviewFrameSizeInput, {
                        axis: "y"
                    }, void 0, false, {
                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                        lineNumber: 83,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                lineNumber: 78,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(Popup, {
                button: /*#__PURE__*/ _jsxDEV(React.Fragment, {
                    children: [
                        /*#__PURE__*/ _jsxDEV("span", {
                            children: [
                                zoom * 100,
                                "%"
                            ]
                        }, void 0, true, {
                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                            lineNumber: 88,
                            columnNumber: 13
                        }, void 0),
                        /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                            className: `${baseClass}__chevron`
                        }, void 0, false, {
                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                            lineNumber: 89,
                            columnNumber: 13
                        }, void 0)
                    ]
                }, void 0, true, {
                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                    lineNumber: 87,
                    columnNumber: 11
                }, void 0),
                className: `${baseClass}__zoom`,
                horizontalAlign: "right",
                render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
                        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
                            children: zoomOptions.map((zoomValue)=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
                                    active: zoom * 100 == zoomValue,
                                    onClick: ()=>{
                                        setZoom(zoomValue / 100);
                                        close();
                                    },
                                    children: [
                                        zoomValue,
                                        "%"
                                    ]
                                }, zoomValue, true, {
                                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                                    lineNumber: 98,
                                    columnNumber: 17
                                }, void 0))
                        }, void 0, false, {
                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                            lineNumber: 96,
                            columnNumber: 13
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                        lineNumber: 95,
                        columnNumber: 11
                    }, void 0),
                showScrollbar: true,
                verticalAlign: "bottom"
            }, void 0, false, {
                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                lineNumber: 85,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("a", {
                className: `${baseClass}__external`,
                href: url,
                onClick: (e)=>{
                    e.preventDefault();
                    setPreviewWindowType('popup');
                },
                target: "_blank",
                title: "Open in new window",
                type: "button",
                children: /*#__PURE__*/ _jsxDEV(ExternalLinkIcon, {}, void 0, false, {
                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                    lineNumber: 126,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
                lineNumber: 115,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
        lineNumber: 31,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map