"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Logs = void 0;
const react_1 = __importStar(require("react"));
const LogsText_1 = require("./LogsText");
const inlines_1 = require("inlines");
const Input_1 = require("../Input");
const Pill_1 = require("../Pill");
const Button_1 = require("../Button");
const utils_1 = require("../../utils");
const Counter_1 = require("../Counter");
const icons_1 = require("../../icons");
const Tooltip_1 = require("../Tooltip");
const filterThis = (data, searchFilter, typeFilter) => {
    return data
        .filter(typeFilter.length !== 0
        ? (item) => typeFilter.includes(item.type)
        : (item) => item)
        .filter(searchFilter !== ''
        ? (item) => item.log.includes(searchFilter)
        : (item) => item);
};
const Logs = ({ data: dataProp, style, onDelete, showCounters, }) => {
    const [typeFilter, setTypeFilter] = (0, react_1.useState)([]);
    const [searchFilter, setSearchFilter] = (0, react_1.useState)('');
    const data = dataProp
        .filter(typeFilter.length !== 0
        ? (item) => typeFilter.includes(item.type)
        : (item) => item)
        .filter(searchFilter !== ''
        ? (item) => item.log.includes(searchFilter)
        : (item) => item);
    const counterData = {
        error: 0,
        warning: 0,
        log: 0,
        info: 0,
        positive: 0,
    };
    data.map((item) => (counterData[item.type] += 1));
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            display: 'flex',
            flexDirection: 'column',
            minWidth: 324,
            ...style,
        } },
        react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                alignItems: 'center',
                flexDirection: 'row',
                gap: 10,
                marginBottom: '16px',
                [utils_1.BpMobile]: {
                    flexDirection: 'column',
                    alignItems: 'normal',
                },
            } },
            react_1.default.createElement("div", { style: { maxWidth: 320 } },
                react_1.default.createElement(Input_1.Input, { type: "search", placeholder: "Search logs", value: searchFilter, onChange: (v) => setSearchFilter(v) })),
            react_1.default.createElement(Pill_1.Pill, { style: { maxWidth: '200px', padding: '8px 16px', borderRadius: 8 }, value: typeFilter, onChange: (v) => setTypeFilter(v), prefix: "Logs Type", placeholder: "All", type: "multi", options: [
                    { value: 'error', label: 'Error' },
                    { value: 'warning', label: 'Warning' },
                    { value: 'log', label: 'Log' },
                    { value: 'info', label: 'Info' },
                    { value: 'positive', label: 'Positive' },
                ] }),
            react_1.default.createElement(Tooltip_1.Tooltip, { text: "Clear logs", position: "top" },
                react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(icons_1.IconDelete, null), size: "medium", color: "alert", light: true, style: {
                        marginLeft: 'auto',
                        [utils_1.BpMobile]: {
                            marginTop: '-52px',
                            marginRight: '4px',
                        },
                    }, onClick: onDelete }))),
        showCounters && (react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                marginBottom: 16,
                gap: 6,
                marginTop: '-4px',
                [utils_1.BpMobile]: {
                    justifyContent: 'center',
                },
            } }, Object.entries(counterData)
            .filter((item) => item[1] !== 0)
            .map((item, idx) => (react_1.default.createElement(Counter_1.Counter, { key: idx, light: true, 
            // @ts-ignore
            color: item[0] === 'log'
                ? 'default'
                : item[0] === 'info'
                    ? 'brand'
                    : item[0] === 'error'
                        ? 'red'
                        : item[0] }, item[1]))))),
        react_1.default.createElement(LogsText_1.LogsText, { data: filterThis(data, searchFilter, typeFilter), style: style })));
};
exports.Logs = Logs;
//# sourceMappingURL=index.js.map