import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { Droppable } from "react-beautiful-dnd";
import styled from "styled-components";
import { Accordion, AccordionSummary, AccordionDetails, IconButton, Typography, Button } from "@material-ui/core";
import { FlowStepRegistration } from "../Utilities/RegisterFlowStep";
import { FlowConstants } from "../CommonUI/FlowConstants";
import { ToolBoxItem } from "./ToolBoxItem";
import { DraggableItemDiv } from "../DesignerUI/CommonStyles";
import { ListViewIcon } from "../../CommonUI/Icon/ListViewIcon";
import { GridViewIcon } from "../../CommonUI/Icon/GridViewIcon";
import { SearchGrayIcon } from "../../CommonUI/Icon/SearchGrayIcon";
import { EditStackIcon } from "../../CommonUI/Icon/EditStackIcon";
import { ToolboxSearch, ToolsPicker } from "./ToolsPicker";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { DeleteGrayIcon } from "../../CommonUI/Icon/DeleteGrayIcon";
import { CloseGrayIcon } from "../../CommonUI/Icon/CloseGrayIcon";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { CheckBox } from "./CheckBox";
import { OpenIcon } from "../../CommonUI/Icon/OpenIcon";
export class ToolboxUIConstants {
}
ToolboxUIConstants.NOT_DRAGGING_COLOR = "rgba(39, 41, 50, 0.15)";
ToolboxUIConstants.DRAGGING_COLOR = "red";
ToolboxUIConstants.LEFT_BEHIND_COLOR = "#4682B4";
export class ToolBox extends React.Component {
    constructor(props) {
        super(props);
        this.onOpenPicker = () => {
            this.setState({
                openPicker: true,
            });
        };
        this.onClosePicker = () => {
            this.setState({
                openPicker: false,
            });
        };
        this.onDeleteSteps = () => {
            if (this.state.editMode && this.props.flow.visibleSteps.length > 0 && this.state.removedSteps.length > 0) {
                this.props.editContext.notification = {
                    type: "confirm",
                    message: "Remove chosen tools? Removed tools you'll be able to found on all tools.",
                    actions: [
                        {
                            items: [
                                {
                                    renderUI: () => {
                                        return (_jsx(Button, Object.assign({ variant: "contained", onClick: () => {
                                                this.props.editContext.notification = undefined;
                                            }, "data-testid": "btn-delete-confirm-no" }, { children: "No" }), void 0));
                                    },
                                },
                                {
                                    renderUI: () => {
                                        return (_jsx(Button, Object.assign({ variant: "contained", color: "primary", onClick: () => {
                                                this.props.flow.visibleSteps = this.props.flow.visibleSteps.filter((stepName) => !this.state.removedSteps.includes(stepName));
                                                this.props.flow.favoriteSteps = this.props.flow.favoriteSteps.filter((stepName) => !this.state.removedSteps.includes(stepName));
                                                this.setState({
                                                    removedSteps: [],
                                                    editMode: this.props.flow.visibleSteps.length > 0,
                                                });
                                                StateManager.propertyChanged(this.props.flow, "visibleSteps");
                                                this.props.editContext.notification = undefined;
                                            }, "data-testid": "btn-delete-confirm-yes" }, { children: "Yes" }), void 0));
                                    },
                                },
                            ],
                        },
                    ],
                };
            }
        };
        this.onChangeSearchStr = (event) => {
            this.setState({
                searchStr: event.target.value,
            });
        };
        this.onFavorite = (favorite, stepName) => {
            if (favorite) {
                this.props.flow.favoriteSteps = [...this.props.flow.favoriteSteps, stepName];
            }
            else {
                this.props.flow.favoriteSteps = this.props.flow.favoriteSteps.filter((s) => s !== stepName);
                if (this.props.flow.favoriteSteps.length === 0 && this.state.viewType === "favorite") {
                    this.setState({
                        viewType: "recent",
                    });
                }
            }
            StateManager.propertyChanged(this.props.flow, "favoriteSteps");
        };
        this.state = {
            openPicker: false,
            removedSteps: [],
            editMode: false,
            searchStr: "",
            viewMode: "list",
            viewType: "recent",
        };
    }
    render() {
        const itemsByCategories = FlowStepRegistration.getItemsByCategories();
        return (_jsxs(_Fragment, { children: [_jsx(Droppable, Object.assign({ isDropDisabled: true, droppableId: FlowConstants.ToolboxId }, { children: (provided, snapshot) => {
                        return (_jsxs(ToolboxDiv, Object.assign({ ref: provided.innerRef, className: "Toolbox_area" }, provided.droppableProps, { children: [_jsxs(ToolboxContent, { children: [_jsxs(ToolboxViewButtons, { children: [_jsx(StyledIconButton, Object.assign({ onClick: () => this.setState({ viewMode: "list" }) }, { children: _jsx(ListViewIcon, {}, void 0) }), void 0),
                                                _jsx(StyledIconButton, Object.assign({ onClick: () => this.setState({ viewMode: "grid" }) }, { children: _jsx(GridViewIcon, {}, void 0) }), void 0)] }, void 0),
                                        _jsx(ToolboxSearch, { placeholder: "Search", variant: "outlined", InputProps: {
                                                endAdornment: this.state.searchStr !== "" ? _jsx(CloseGrayIcon, {}, void 0) : _jsx(SearchGrayIcon, {}, void 0),
                                            }, value: this.state.searchStr, onChange: this.onChangeSearchStr, "data-testid": "inp-toolbox-search-steps" }, void 0),
                                        _jsxs(ToolboxTitleDiv, { children: [_jsxs("div", { children: [_jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: "Toolbox" }), void 0),
                                                        _jsxs(Typography, Object.assign({ variant: "caption" }, { children: ["(", Object.values(itemsByCategories).reduce((s, items) => {
                                                                    s += items.length;
                                                                    return s;
                                                                }, 0), " ", "steps)"] }), void 0)] }, void 0),
                                                _jsxs("div", { children: [this.props.flow.visibleSteps.length > 0 && !this.state.editMode && (_jsx(StyledIconButton, Object.assign({ style: { marginRight: 5 }, onClick: () => this.setState({ editMode: true }), "data-testid": "btn-edit-tools" }, { children: _jsx(EditStackIcon, {}, void 0) }), void 0)),
                                                        this.state.editMode && (_jsxs(_Fragment, { children: [_jsx(StyledIconButton, Object.assign({ style: { marginRight: 5 }, onClick: this.onDeleteSteps, disabled: this.state.removedSteps.length === 0, "data-testid": "btn-delete-tools" }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0),
                                                                _jsx(StyledIconButton, Object.assign({ style: { marginRight: 5 }, onClick: () => this.setState({ editMode: false }), "data-testid": "btn-close-edit-mode" }, { children: _jsx(CloseGrayIcon, {}, void 0) }), void 0)] }, void 0)),
                                                        _jsx(Button, Object.assign({ onClick: this.onOpenPicker, "data-testid": "btn-all-tools" }, { children: "All tools" }), void 0)] }, void 0)] }, void 0),
                                        _jsx(ObserveState, { listenTo: this.props.flow, properties: ["visibleSteps", "favoriteSteps"], control: () => {
                                                const filteredItems = Object.entries(itemsByCategories).reduce((obj, [category, items]) => {
                                                    obj[category] = items.filter((item) => this.props.flow.visibleSteps.includes(item.name) &&
                                                        item.name
                                                            .toLowerCase()
                                                            .includes(this.state.searchStr.toLowerCase()) &&
                                                        (this.state.viewType === "recent" ||
                                                            this.props.flow.favoriteSteps.includes(item.name)));
                                                    return obj;
                                                }, {});
                                                return (_jsxs(_Fragment, { children: [this.props.flow.favoriteSteps.length > 0 && (_jsxs(ToolboxTabDiv, { children: [_jsx(StyledTabDiv, Object.assign({ active: this.state.viewType === "recent", onClick: () => this.setState({ viewType: "recent" }) }, { children: "Recent" }), void 0),
                                                                _jsx(StyledTabDiv, Object.assign({ active: this.state.viewType === "favorite", onClick: () => this.setState({ viewType: "favorite" }) }, { children: "Favorite" }), void 0)] }, void 0)),
                                                        Object.values(filteredItems).find((items) => items.length > 0) ? (_jsx(StepsWrapper, { children: Object.entries(filteredItems).map(([category, controls]) => {
                                                                if (controls.length === 0)
                                                                    return null;
                                                                const doms = controls
                                                                    .map((control, index) => {
                                                                    const data = control;
                                                                    const name = control.name;
                                                                    // 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(DraggableItemDiv, Object.assign({ style: {
                                                                                    borderColor: ToolboxUIConstants.LEFT_BEHIND_COLOR,
                                                                                } }, { children: [data.icon, _jsx("span", { children: data.name }, void 0)] }), void 0)),
                                                                            _jsxs(ToolBoxItemDiv, Object.assign({ selected: this.state.editMode &&
                                                                                    this.state.removedSteps.includes(control.name), viewMode: this.state.viewMode }, { children: [this.state.editMode && (_jsx("div", Object.assign({ style: {
                                                                                            marginRight: 4,
                                                                                        }, "data-testid": `btn-checkbox-${control.name}` }, { children: _jsx(CheckBox, { checked: this.state.removedSteps.includes(control.name), onChange: (checked) => {
                                                                                                if (checked) {
                                                                                                    this.setState({
                                                                                                        removedSteps: [
                                                                                                            ...this
                                                                                                                .state
                                                                                                                .removedSteps,
                                                                                                            control.name,
                                                                                                        ],
                                                                                                    });
                                                                                                }
                                                                                                else {
                                                                                                    this.setState({
                                                                                                        removedSteps: this.state.removedSteps.filter((stepName) => stepName !==
                                                                                                            control.name),
                                                                                                    });
                                                                                                }
                                                                                            } }, void 0) }), void 0)),
                                                                                    _jsx(ToolBoxItem, { editContext: this.props
                                                                                            .editContext, control: control, index: index, disabled: this.state.editMode, showFavorite: true, onClickFavorite: this.onFavorite, isFavorite: this.props.flow.favoriteSteps.includes(control.name) }, 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(OpenIcon, {}, void 0) }, { children: category }), void 0),
                                                                        _jsx(StyledAccordionDetails, Object.assign({ viewmode: this.state.viewMode }, { children: doms }), void 0)] }), category));
                                                            }) }, void 0)) : (_jsxs(StyledWrapper, { children: [_jsx(Typography, { children: "You have no tools in the toolbox." }, void 0),
                                                                _jsx(Button, Object.assign({ fullWidth: true, color: "primary", variant: "contained", onClick: this.onOpenPicker, "data-testid": "btn-add-tools" }, { children: "Add tools" }), void 0)] }, void 0))] }, void 0));
                                            } }, void 0)] }, void 0), provided.placeholder] }), void 0));
                    } }), void 0),
                _jsx(ToolsPicker, { open: this.state.openPicker, editContext: this.props.editContext, flow: this.props.flow, onClose: this.onClosePicker }, void 0)] }, void 0));
    }
}
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 ToolboxContent = styled.div `
    border-top: 1px solid #e6e9ed;
    flex: 1;
    overflow: auto;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;

    @media (min-width: 1366px) {
        padding-left: calc(10px + 14 * (100vw - 1366px) / 554);
        padding-right: calc(10px + 14 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        padding-left: 24px;
        padding-right: 24px;
    }
`;
const StyledAccordion = styled(Accordion) `
    && {
        border: none;
        box-shadow: none;
        margin: 0px !important;
    }
`;
const StyledAccordionSummary = styled(AccordionSummary) `
    && {
        display: none;
        padding: 0;
        min-height: 0 !important;
        font-family: Inter;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 15px;
        color: rgba(39, 41, 50, 0.6);

        @media (min-width: 1366px) {
            display: flex;
        }
        .MuiAccordionSummary-content {
            margin: 0;
        }
    }
`;
const StyledAccordionDetails = styled(AccordionDetails) `
    && {
        display: flex;
        ${(props) => (props.viewmode === "list" ? "flex-direction: column" : "flex-wrap: wrap")};
        padding: 0;
    }
`;
const ToolboxViewButtons = styled.div `
    display: flex;
    padding: 4px 0;
`;
const StyledIconButton = styled(IconButton) `
    &.MuiIconButton-root {
        padding: 0;
    }
`;
const ToolboxTitleDiv = styled.div `
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    margin-top: 16px;

    .MuiTypography-subtitle1 {
        font-family: Inter;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        color: #272932;
    }

    .MuiTypography-caption {
        font-family: Inter;
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 140%;
        color: #606881;
        margin-left: 4px;
    }

    .MuiButton-text {
        padding: 0;
        font-family: Inter;
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 140%;
        color: #272932;
        text-transform: none;
        min-width: 0;

        &:hover {
            color: #4050a6;
            background-color: transparent;
        }
    }

    > div {
        display: flex;
        align-items: center;
    }
`;
const ToolboxTabDiv = styled.div `
    display: flex;
    flex-direction: row;
`;
const StyledWrapper = styled.div `
    .MuiTypography-body1 {
        font-family: Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 140%;
        color: #606881;
        margin-bottom: 12px;
    }

    .MuiButton-root {
        font-family: Inter;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 140%;
        text-transform: none;
    }

    .MuiButton-containedPrimary {
        background-color: rgba(64, 80, 166, 0.8);
    }
`;
const ToolBoxItemDiv = styled("div") `
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    ${(props) => props.viewMode === "grid" &&
    `
		width: 50%;
		&:nth-child(odd) {
			padding-right: 4px;
		}
		&:nth-child(even) {
			padding-left: 4px;
		}
	`}

    .ToolBoxItem {
        flex: 1;
        ${(props) => props.selected &&
    `
			& > div {
				border: 1px solid #4050A6 !important;
				background: rgba(64, 80, 166, 0.05);
			}
		`}

        & > div {
            margin-bottom: 0;
        }

        ${(props) => props.viewMode === "grid" &&
    `
			height: 100%;
			& > div {
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 10px 0;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 12px;
				line-height: 1.2;
				img {
					margin: 0 0 7px;
				}
			}
		`}
    }
`;
const StyledTabDiv = styled("div") `
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    /* identical to box height */

    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    cursor: pointer;

    padding: 8px 0;
    width: 50%;

    &:first-child {
        margin-right: 8px;
    }

    ${(props) => props.active
    ? `
			color: #272932;
			opacity: 1;
			border-bottom: 1px solid #4050A6;
		`
    : `
			color: rgba(39, 41, 50, 0.6);
			border-bottom: 1px solid rgba(39, 41, 50, 0.1);
		`}
`;
const StepsWrapper = styled.div `
    flex: 1;
    overflow: auto;
    padding-right: 10px;
    margin-right: -10px;

    display: flex;
    flex-direction: column;

    @media (min-width: 1366px) {
        padding-right: calc(10px + 14 * (100vw - 1366px) / 554);
        margin-right: calc(-10px - 14 * (100vw - 1366px) / 554);
    }

    @media (min-width: 1920px) {
        padding-right: 24px;
        margin-right: -24px;
    }
`;
//# sourceMappingURL=ToolBox.js.map