import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Draggable, Droppable, } from "react-beautiful-dnd";
import styled from "styled-components";
import { Button } from "@material-ui/core";
import { Accordion, AccordionSummary, AccordionDetails, Tooltip } from "@material-ui/core";
import { UIControlRegistration, ControlType } from "../Utilities/RegisterUIControl";
import { FormMode, FormDesignConstants } from "../FormDesignConstants";
import { EditIcon } from "../../CommonUI/Icon/EditIcon";
import { ExpandIcon } from "../../CommonUI/Icon/ExpandIcon";
export const ToolboxDiv = styled.div `
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e9ed;
    border-radius: 0;
    height: 100%;
    flex-basis: 50px;

    @media (min-width: 1366px) {
        flex-basis: calc(236px + 59 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        flex-basis: 295px;
    }
`;
const ToolboxItem = styled.div `
    border: 1px solid #e6e9ed;
    border-radius: 5px;
    color: #677c95;
    cursor: pointer;

    font-family: Mulish;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    margin-bottom: 10px;

    @media (min-width: 1366px) {
        padding-left: calc(15px + 7 * (100vw - 1366px) / 554);
        padding-top: 15px;
        padding-bottom: 15px;
        height: auto;
        width: auto;
        font-size: 13px;
        line-height: 16px;
        justify-content: flex-start;
    }

    @media (min-width: 1920px) {
        padding-left: 22px;
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 14px;
        line-height: 18px;
    }

    > img {
        margin-right: 0;
        transform: scale(0.88);
        @media (min-width: 1366px) {
            transform: scale(1);
            margin-right: 16px;
        }
        @media (min-width: 1920px) {
            margin-right: 17px;
        }
    }

    span {
        display: none;
        @media (min-width: 1366px) {
            display: inline;
        }
    }
`;
const ButtonWrapperDiv = styled.div `
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e9ed;
    padding-left: 12px;
    height: 50px;

    @media (min-width: 768px) {
        padding-left: 12px;
        height: 50px;
    }

    @media (min-width: 1366px) {
        padding-left: calc(18px + 7 * (100vw - 1366px) / 554);
        height: calc(64px + 23 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        padding-left: 25px;
        height: 87px;
    }
`;
const SmallButton = styled(Button) `
    && {
        background: #15466b;
        font-size: 14px;
        line-height: 18px;
        font-family: Mulish;
        font-weight: 600;
        height: 28px;
        width: 28px;
        min-width: 0;
        display: flex;
        align-items: center;
        justifiy-content: center;
        padding: 0;

        &:hover {
            background: #1873b9;
        }

        @media (min-width: 1366px) {
            display: flex;
            font-size: 13px;
            line-height: 16px;
            padding: 5px 13px;
            height: auto;
            width: auto;
        }

        @media (min-width: 1920px) {
            font-size: 14px;
            line-height: 18px;
            padding: 6px 14px;
        }

        .label {
            display: none;
            @media (min-width: 1366px) {
                display: block;
            }
        }

        .MuiButton-startIcon {
            margin: 0;

            @media (min-width: 1366px) {
                display: block;
                margin-right: 10px;
            }

            @media (min-width: 1920px) {
                margin-right: 11px;
            }
        }
    }
`;
const ToolboxContent = styled.div `
    border-top: 1px solid #e6e9ed;
    flex: 1;
    overflow: auto;
    padding-left: 12px;
    padding-right: 10px;
    padding-top: 10px;

    @media (min-width: 768px) {
        padding-left: 12px;
        padding-right: 10px;
        padding-top: 10px;
    }

    @media (min-width: 1366px) {
        padding-left: calc(18px + 7 * (100vw - 1366px) / 554);
        padding-right: calc(18px + 12 * (100vw - 1366px) / 554);
        padding-top: calc(13px + 11 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        padding-left: 25px;
        padding-right: 30px;
        padding-top: 24px;
    }
`;
const StyledAccordion = styled(Accordion) `
    && {
        border: none;
        box-shadow: none;
    }
`;
const StyledAccordionSummary = styled(AccordionSummary) `
    && {
        color: #01244e;
        font-family: Mulish;
        font-weight: 600;
        display: none;
        padding: 0;
        min-height: 0 !important;

        @media (min-width: 1366px) {
            display: flex;
            margin-bottom: 13px;
            font-size: 18px;
            line-height: 23px;
        }
        @media (min-width: 1920px) {
            margin-bottom: 19px;
            font-size: 20px;
            line-height: 25px;
        }

        .MuiAccordionSummary-content {
            margin: 0;
        }
    }
`;
const StyledAccordionDetails = styled(AccordionDetails) `
    && {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
`;
export class ToolBox extends React.Component {
    render() {
        return (_jsx(Droppable, Object.assign({ isDropDisabled: true, droppableId: "toolbox" }, { children: (provided, snapshot) => {
                return (_jsxs(ToolboxDiv, Object.assign({ ref: provided.innerRef, className: "Toolbox_area" }, provided.droppableProps, { children: [_jsx(ButtonWrapperDiv, { children: _jsx(Tooltip, Object.assign({ title: "Edit Form Defaults", placement: "top" }, { children: _jsx(SmallButton, Object.assign({ variant: "contained", color: "primary", startIcon: _jsx(EditIcon, {}, void 0), onClick: () => this.props.onSelectFormDefaultConfig(), "data-testid": "edit-form-defaults" }, { children: _jsx("span", Object.assign({ className: "label" }, { children: "Edit Form Defaults" }), void 0) }), void 0) }), void 0) }, void 0),
                        _jsx(ToolboxContent, { children: Object.entries(Object.entries(UIControlRegistration).reduce((obj, [name, data]) => {
                                if (!obj[data.category]) {
                                    obj[data.category] = [];
                                }
                                obj[data.category].push({ name, data });
                                return obj;
                            }, {})).map(([category, controls]) => {
                                const doms = controls
                                    .map((control, index) => {
                                    const data = control.data;
                                    const name = control.name;
                                    if (this.props.mode === FormMode.LayoutDesign &&
                                        data.typeOfControl === ControlType.Control) {
                                        return null;
                                    }
                                    if (this.props.mode === FormMode.FormDesign &&
                                        data.typeOfControl === ControlType.Container) {
                                        return null;
                                    }
                                    // this code does not work.  it is the code to leave an item in the toolbox when dragging
                                    const shouldRenderClone = name === snapshot.draggingFromThisWith;
                                    return (_jsxs(React.Fragment, { children: [shouldRenderClone && (_jsxs(ToolboxItem, Object.assign({ style: {
                                                    borderColor: FormDesignConstants.TOOLBOX_LEFT_BEHIND_COLOR,
                                                } }, { children: [data.icon, _jsx("span", { children: data.name }, void 0)] }), void 0)),
                                            _jsx(Draggable, Object.assign({ draggableId: name, index: index }, { children: (provided, snapshot) => (_jsx("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { children: _jsx(Tooltip, Object.assign({ title: data.name, placement: "top", arrow: true }, { children: _jsxs(ToolboxItem, Object.assign({ style: {
                                                                borderColor: snapshot.isDragging
                                                                    ? FormDesignConstants.TOOLBOX_DRAGGING_COLOR
                                                                    : FormDesignConstants.TOOLBOX_NOT_DRAGGING_COLOR,
                                                            } }, { children: [data.icon, _jsx("span", { children: data.name }, void 0)] }), void 0) }), void 0) }), void 0)) }), void 0)] }, name));
                                })
                                    .filter((d) => !!d);
                                if (doms.length === 0)
                                    return null;
                                // todo: make this a method on control registration
                                return (_jsxs(StyledAccordion, Object.assign({ defaultExpanded: true }, { children: [_jsx(StyledAccordionSummary, Object.assign({ expandIcon: _jsx(ExpandIcon, {}, void 0) }, { children: category }), void 0),
                                        _jsx(StyledAccordionDetails, { children: doms }, void 0)] }), category));
                            }) }, void 0), provided.placeholder] }), void 0));
            } }), void 0));
    }
}
//# sourceMappingURL=ToolBox.js.map