import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip } from "@material-ui/core";
import React from "react";
import { Draggable } from "react-beautiful-dnd";
import { FlowConstants } from "../CommonUI/FlowConstants";
import { ToolboxUIConstants } from "./ToolBox";
import { DraggableItemDiv } from "../DesignerUI/CommonStyles";
import { StarIcon } from "../../CommonUI/Icon/StarIcon";
import { BlueStarIcon } from "../../CommonUI/Icon/BlueStarIcon";
export const ToolBoxItem = (props) => {
    var _a;
    const data = props.control;
    const name = props.control.name;
    const isDragging = ((_a = props.editContext.draggingControl) === null || _a === void 0 ? void 0 : _a.source.current) === name;
    const ref = React.useRef(null);
    React.useEffect(() => {
        if (isDragging && ref.current && props.editContext.draggingControl) {
            const el = ref.current;
            const targetWidth = FlowConstants.DRAGGING_STEP_WIDTH;
            const halfWidth = targetWidth / 2;
            const targetHeight = FlowConstants.DRAGGING_STEP_HEIGHT;
            const halfHeight = targetHeight / 2;
            el.style.width = `${targetWidth}px`;
            el.style.height = `${targetHeight}px`;
            el.style.left = `${props.editContext.draggingControl.pos.x - halfWidth}px`;
            el.style.top = `${props.editContext.draggingControl.pos.y - halfHeight}px`;
        }
    }, [isDragging, props.editContext.draggingControl]);
    return (_jsx(Draggable, Object.assign({ draggableId: name, index: props.index, isDragDisabled: props.disabled }, { children: (provided, snapshot) => (_jsx("div", Object.assign({}, provided.draggableProps, provided.dragHandleProps, { ref: (node) => {
                provided.innerRef(node);
                ref.current = node;
            }, className: "ToolBoxItem" }, { children: _jsx(Tooltip, Object.assign({ title: data.name, placement: "top", arrow: true }, { children: _jsxs(DraggableItemDiv, Object.assign({ style: {
                        borderColor: isDragging
                            ? ToolboxUIConstants.DRAGGING_COLOR
                            : ToolboxUIConstants.NOT_DRAGGING_COLOR,
                    }, isDragging: isDragging }, { children: [data.icon, _jsx("span", { children: isDragging ? data.name.slice(0, FlowConstants.MAX_CHARS_DRAGGING_STEP) : data.name }, void 0),
                        props.showFavorite && (_jsx("div", Object.assign({ className: "favorite-icon", onClick: () => {
                                if (props.onClickFavorite) {
                                    props.onClickFavorite(!props.isFavorite, data.name);
                                }
                            } }, { children: props.isFavorite ? _jsx(BlueStarIcon, {}, void 0) : _jsx(StarIcon, {}, void 0) }), void 0))] }), void 0) }), void 0) }), void 0)) }), void 0));
};
//# sourceMappingURL=ToolBoxItem.js.map