'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useDraggable } from '@dnd-kit/core';
import React from 'react';
import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
import { ToolbarControls } from './Controls/index.js';
import './index.scss';
const baseClass = 'live-preview-toolbar';
const DraggableToolbar = (props)=>{
    const { toolbarPosition } = useLivePreviewContext();
    const { attributes, listeners, setNodeRef, transform } = useDraggable({
        id: 'live-preview-toolbar'
    });
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            `${baseClass}--draggable`
        ].join(' '),
        style: {
            left: `${toolbarPosition.x}px`,
            top: `${toolbarPosition.y}px`,
            ...transform ? {
                transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
            } : {}
        },
        children: [
            /*#__PURE__*/ _jsxDEV("button", {
                ...listeners,
                ...attributes,
                className: `${baseClass}__drag-handle`,
                ref: setNodeRef,
                type: "button",
                children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
                    fileName: "src/elements/LivePreview/Toolbar/index.tsx",
                    lineNumber: 43,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
                lineNumber: 36,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(ToolbarControls, {
                ...props
            }, void 0, false, {
                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
                lineNumber: 45,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
        lineNumber: 22,
        columnNumber: 5
    }, this);
};
const StaticToolbar = (props)=>{
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            baseClass,
            `${baseClass}--static`
        ].join(' '),
        children: /*#__PURE__*/ _jsxDEV(ToolbarControls, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
            lineNumber: 53,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
        lineNumber: 52,
        columnNumber: 5
    }, this);
};
export const LivePreviewToolbar = (props)=>{
    const { draggable } = props;
    if (draggable) {
        return /*#__PURE__*/ _jsxDEV(DraggableToolbar, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
            lineNumber: 66,
            columnNumber: 12
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV(StaticToolbar, {
        ...props
    }, void 0, false, {
        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
        lineNumber: 69,
        columnNumber: 10
    }, this);
};

//# sourceMappingURL=index.js.map