import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { Dialog, Typography, TextField, Button } from "@material-ui/core";
import styled from "styled-components";
import { SearchGrayIcon } from "../../CommonUI/Icon/SearchGrayIcon";
import { FlowStepRegistration } from "../Utilities/RegisterFlowStep";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { CloseGrayIcon } from "../../CommonUI/Icon/CloseGrayIcon";
export const ToolsPicker = (props) => {
    const [searchStep, setSearchStep] = useState("");
    const [selectedCategory, setSelectedCategory] = useState(null);
    const [selectedSteps, setSelectedSteps] = useState([]);
    const [removedSteps, setRemovedSteps] = useState([]);
    const itemsByCategories = FlowStepRegistration.getItemsByCategories();
    const onChangeSearchStep = (event) => {
        setSearchStep(event.target.value);
    };
    const onApply = () => {
        props.flow.visibleSteps = [
            ...selectedSteps,
            ...props.flow.visibleSteps.filter((stepName) => !removedSteps.includes(stepName)),
        ];
        setSelectedSteps([]);
        setRemovedSteps([]);
        StateManager.propertyChanged(props.flow, "visibleSteps");
        props.onClose();
    };
    const onAddAll = () => {
        let tempSteps = Object.entries(itemsByCategories).reduce((list, [_, items]) => {
            list = [
                ...list,
                ...items.filter((item) => !props.flow.visibleSteps.includes(item.name)).map((item) => item.name),
            ];
            return list;
        }, []);
        setRemovedSteps([]);
        setSelectedSteps(tempSteps);
    };
    const filteredItems = Object.entries(itemsByCategories).reduce((obj, [category, items]) => {
        if (searchStep) {
            if (category.toLowerCase().includes(searchStep.toLowerCase())) {
                obj[category] = items;
            }
            else {
                obj[category] = items.filter((item) => item.name.toLowerCase().includes(searchStep.toLowerCase()));
            }
        }
        return obj;
    }, {});
    const onSelectedSteps = (stepName) => {
        if (props.flow.visibleSteps.includes(stepName)) {
            let idx = removedSteps.indexOf(stepName);
            let tempSteps = [...removedSteps];
            if (idx >= 0) {
                tempSteps.splice(idx, 1);
            }
            else {
                tempSteps.push(stepName);
            }
            setRemovedSteps(tempSteps);
        }
        else {
            let idx = selectedSteps.indexOf(stepName);
            let tempSteps = [...selectedSteps];
            if (idx < 0) {
                tempSteps = [...tempSteps, stepName];
            }
            else {
                tempSteps.splice(idx, 1);
            }
            setSelectedSteps(tempSteps);
        }
    };
    return (_jsxs(StyledDialog, Object.assign({ open: props.open, onClose: props.onClose, "data-testid": "ToolsPicker__dialog" }, { children: [_jsxs("div", Object.assign({ className: "ToolsPicker__header" }, { children: [_jsx("div", Object.assign({ className: "ToolsPicker__header__item" }, { children: _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: "Pick Step" }), void 0) }), void 0),
                    _jsxs("div", Object.assign({ className: "ToolsPicker__header__item" }, { children: [_jsx("label", { children: "Toolbox:" }, void 0),
                            _jsxs("span", { children: [props.flow.visibleSteps.length, " steps"] }, void 0)] }), void 0),
                    _jsxs("div", Object.assign({ className: "ToolsPicker__header__item" }, { children: [_jsx("label", { children: "Chosen:" }, void 0),
                            _jsxs("span", { children: [selectedSteps.length, " steps"] }, void 0)] }), void 0),
                    _jsx("div", Object.assign({ className: "ToolsPicker__header__item ToolsPicker__search" }, { children: _jsx(ToolboxSearch, { placeholder: "Search", variant: "outlined", value: searchStep, onChange: onChangeSearchStep, "data-testid": "ToolsPicker_text_search", InputProps: {
                                endAdornment: searchStep && searchStep !== "" ? _jsx(CloseGrayIcon, {}, void 0) : _jsx(SearchGrayIcon, {}, void 0),
                            } }, void 0) }), void 0)] }), void 0),
            _jsxs("div", Object.assign({ className: "ToolsPicker__body" }, { children: [(!searchStep || searchStep === "") && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: "ToolsPicker__body__category" }, { children: [_jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: "Categories" }), void 0),
                                    _jsx("div", Object.assign({ className: "Categories__root" }, { children: _jsx("div", Object.assign({ className: "Categories__list" }, { children: Object.keys(itemsByCategories).map((category) => {
                                                return (_jsx("div", Object.assign({ className: `Categories__list__item${selectedCategory === category ? " Selected" : ""}`, onClick: () => setSelectedCategory(category) }, { children: category }), category));
                                            }) }), void 0) }), void 0)] }), void 0),
                            _jsxs("div", Object.assign({ className: "ToolsPicker__body__category__steps" }, { children: [_jsx("div", Object.assign({ className: "Steps__root" }, { children: _jsx("div", Object.assign({ className: "Steps__grid" }, { children: selectedCategory !== null &&
                                                itemsByCategories[selectedCategory].map((step) => {
                                                    return (_jsx(StepItem, { step: step, selectedSteps: selectedSteps, removedSteps: removedSteps, onSelectedSteps: onSelectedSteps, flow: props.flow }, step.name));
                                                }) }), void 0) }), void 0),
                                    _jsx("div", Object.assign({ className: "Steps__select_all" }, { children: _jsx(Button, Object.assign({ onClick: onAddAll }, { children: "Select all tools" }), void 0) }), void 0)] }), void 0)] }, void 0)),
                    searchStep && searchStep !== "" && (_jsxs("div", Object.assign({ className: "SearchResults" }, { children: [_jsx("div", Object.assign({ className: "Categories" }, { children: Object.entries(filteredItems).map(([category, items]) => {
                                    if (items.length === 0) {
                                        return null;
                                    }
                                    else {
                                        return (_jsxs("div", Object.assign({ className: "Category__root" }, { children: [_jsx("div", Object.assign({ className: "Category__name" }, { children: category }), void 0),
                                                _jsx("div", Object.assign({ className: "Steps__grid" }, { children: items.map((step) => (_jsx(StepItem, { step: step, flow: props.flow, selectedSteps: selectedSteps, removedSteps: removedSteps, onSelectedSteps: onSelectedSteps }, step.name))) }), void 0)] }), category));
                                    }
                                }) }), void 0),
                            _jsx("div", Object.assign({ className: "Steps__select_all" }, { children: _jsx(Button, Object.assign({ onClick: onAddAll }, { children: "Select all tools" }), void 0) }), void 0)] }), void 0))] }), void 0),
            _jsx("div", Object.assign({ className: "ToolsPicker__actions" }, { children: _jsx(Button, Object.assign({ variant: "contained", onClick: onApply, "data-testid": "btn-add-to-toolbox" }, { children: "Add to My toolbox" }), void 0) }), void 0)] }), void 0));
};
const StepItem = (props) => {
    const { step, onSelectedSteps, selectedSteps, removedSteps } = props;
    const isAdded = props.flow.visibleSteps.includes(step.name) && !removedSteps.includes(step.name);
    const isSelected = selectedSteps.includes(step.name);
    return (_jsxs(StepItemDiv, Object.assign({ className: `Steps__item ${isSelected ? "Selected" : ""} ${isAdded ? "Added" : ""}`, onClick: () => onSelectedSteps(step.name) }, { children: [_jsx("div", Object.assign({ className: "Steps__item__icon" }, { children: step.icon }), void 0),
            _jsx("div", Object.assign({ className: "Steps__item__name" }, { children: step.name }), void 0)] }), void 0));
};
const StyledDialog = styled(Dialog) `
    .MuiDialog-paperScrollPaper {
        padding: 16px 20px;
    }

    .MuiDialog-paperWidthSm {
        max-width: none;
    }

    *::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 2px rgba(147, 169, 191, 0.28);
        background-color: transparent;
    }

    *::-webkit-scrollbar {
        width: 5px;
        background-color: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background-color: rgba(64, 80, 166, 0.8);
    }

    .ToolsPicker__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 16px;

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

        .ToolsPicker__header__item {
            margin-right: 15px;

            &.ToolsPicker__search {
                margin-left: auto;
            }

            label {
                font-family: Inter;
                font-style: normal;
                font-weight: normal;
                font-size: 9px;
                line-height: 160%;
                color: #606881;
                margin-right: 4px;
            }
            span {
                font-family: Inter;
                font-style: normal;
                font-weight: normal;
                font-size: 9px;
                line-height: 160%;
                color: #606881;
            }
        }
    }

    .ToolsPicker__actions {
        padding: 16px 0 0;
        display: flex;
        justify-content: flex-end;

        .MuiButton-contained {
            background: #4050a6;
            color: #fff;
            font-family: Inter;
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 140%;
            text-transform: none;
            padding: 6px 16px;
        }
    }

    .ToolsPicker__body {
        display: flex;
        flex-direction: row;
        flex: 1;
        overflow: auto;
        border-bottom: 1px solid rgba(39, 41, 50, 0.1);
        min-height: 286px;

        .SearchResults {
            display: flex;
            flex-direction: column;
            overflow: auto;
            .Categories {
                flex: 1;
                overflow: auto;
                max-width: 612px;
                min-width: 612px;
            }
            .Steps__grid {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
                > div {
                    width: 25%;
                }
            }
        }

        .Steps__select_all {
            display: flex;
            justify-content: flex-end;
            padding: 14px 0;

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

                &:hover {
                    background-color: transparent;
                    color: rgba(39, 41, 50, 0.8);
                }
            }
        }

        .MuiTypography-subtitle1 {
            font-family: Inter;
            font-style: normal;
            font-weight: 500;
            font-size: 10px;
            line-height: 12px;
            display: flex;
            align-items: center;
            letter-spacing: 0.2px;
            color: #4050a6;
            margin-bottom: 8px;
        }
        .ToolsPicker__body__category {
            min-width: 156px;
            border-right: 1px solid rgba(39, 41, 50, 0.1);
            padding-right: 4px;
            display: flex;
            flex-direction: column;
            margin-bottom: 16px;
            .Categories__root {
                flex: 1;
                overflow: auto;
                padding-right: 2px;

                .Categories__list {
                    background: rgba(64, 80, 166, 0.1);
                    border-radius: 4px;
                    padding: 2px;

                    .Categories__list__item {
                        cursor: pointer;
                        font-family: Inter;
                        font-style: normal;
                        font-weight: 500;
                        font-size: 11px;
                        line-height: 13px;
                        color: #4050a6;
                        padding: 8px 14px;
                        border-radius: 4px;

                        &.Selected {
                            color: #272932;
                            background: #ffffff;
                        }
                    }
                }
            }
        }
        .ToolsPicker__body__category__steps {
            min-width: 456px;
            max-width: 456px;
            display: flex;
            flex-direction: column;

            .Steps__root {
                flex: 1;
                overflow: auto;

                .Steps__grid {
                    display: flex;
                    flex-wrap: wrap;
                    padding: 8px;

                    > div {
                        width: 33.3333333%;
                    }
                }
            }
        }
    }
`;
const StepItemDiv = styled.div `
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px;

    .Steps__item__icon {
        width: 38px;
        height: 32px;
        border: 1px solid rgba(39, 41, 50, 0.15);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
    }

    .Steps__item__name {
        font-family: Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 11px;
        line-height: 140%;
        color: #272932;
    }

    &.Selected {
        .Steps__item__icon {
            border: 1px solid #4050a6;
        }

        .Steps__item__name {
            color: #4050a6;
        }
    }

    &.Added {
        .Steps__item__icon {
            background: rgba(64, 80, 166, 0.3);
        }
    }
`;
export const ToolboxSearch = styled(TextField) `
    .MuiOutlinedInput-input {
        padding: 8px 0 8px 16px;
    }

    .MuiOutlinedInput-adornedEnd {
        padding-right: 12px;
    }

    .MuiInputBase-root {
        font-family: Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 140%;
        color: rgba(39, 41, 50, 0.7);

        &.Mui-focused {
            .MuiOutlinedInput-notchedOutline {
                border-color: rgba(39, 41, 50, 0.2);
            }
        }
    }

    .MuiInputBase-input::placeholder {
        color: rgba(39, 41, 50, 0.3);
    }
`;
//# sourceMappingURL=ToolsPicker.js.map