"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Log = void 0;
const react_1 = __importDefault(require("react"));
const Text_1 = require("../Text");
const Badge_1 = require("../Badge");
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const pretty_date_1 = require("@based/pretty-date");
const utils_1 = require("../../utils");
const Log = ({ ts, label, log, type, data, index }) => {
    let d = (0, pretty_date_1.prettyDate)(~~(ts / 60e3) * 60e3, 'date-time');
    const date = new Date(ts);
    const result = date
        .toLocaleDateString('en-GB', {
        hour: '2-digit',
        minute: '2-digit',
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
    })
        .split(', ');
    const color = type === 'error'
        ? 'negative'
        : type === 'warning'
            ? 'warning'
            : type === 'info'
                ? 'brand'
                : type === 'positive'
                    ? 'positive'
                    : 'default';
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            display: 'flex',
            flexDirection: 'row',
            marginBottom: 2,
            '&:hover': {
                background: (0, varsUtilities_1.color)('action', 'system', 'hover'),
            },
            '& div': {
                userSelect: 'text',
                fontFamily: 'Fira Code !important',
                lineHeight: '20px !important',
            },
            [utils_1.BpMobile]: {
                flexDirection: 'column',
            },
        } },
        react_1.default.createElement(inlines_1.styled.div, { style: {
                display: 'flex',
                flexDirection: 'column',
                [utils_1.BpMobile]: {
                    flexDirection: 'row-reverse',
                    alignItems: 'center',
                    justifyContent: 'flex-end',
                },
            } },
            d && (react_1.default.createElement(Text_1.Text, { light: true, style: {
                    minWidth: '142px',
                    marginRight: 16,
                    color: (0, varsUtilities_1.color)('content', type === 'warning'
                        ? 'warning'
                        : type === 'error'
                            ? 'negative'
                            : type === 'info'
                                ? 'brand'
                                : type === 'positive'
                                    ? 'positive'
                                    : 'default', 'secondary'),
                } }, result[1] + ' ' + result[0])),
            react_1.default.createElement(Badge_1.Badge, { style: {
                    textWrap: 'nowrap',
                    marginRight: 16,
                    marginTop: 3,
                    marginBottom: 6,
                    borderRadius: 4,
                }, light: true, color: color }, type)),
        react_1.default.createElement(Text_1.Text, { style: {
                color: (0, varsUtilities_1.color)('content', type === 'warning'
                    ? 'warning'
                    : type === 'error'
                        ? 'negative'
                        : type === 'positive'
                            ? 'positive'
                            : type === 'info'
                                ? 'brand'
                                : 'default', 'primary'),
            } }, log)));
};
exports.Log = Log;
//# sourceMappingURL=Log.js.map