"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UrlDisplayLayout = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const FixedColumn_1 = require("nice-ui/lib/3-list-item/FixedColumn");
const styles_1 = require("nice-ui/lib/styles");
const BasicButton_1 = tslib_1.__importDefault(require("nice-ui/lib/2-inline-block/BasicButton"));
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const use_t_1 = require("use-t");
const Favicon_1 = require("../../../components/Favicon");
const util_1 = require("../../../web/util");
const CopyButton_1 = require("./CopyButton");
const iconColumn = 40;
const iconClass = (0, nano_theme_1.rule)({
    d: 'flex',
    ai: 'center',
    jc: 'center',
    w: '32px',
    h: '32px',
    mr: '-4px 0',
    bg: 'rgba(250,250,250,.9)',
    bdrad: '15px',
    '& img': {
        bdrad: '2px',
    },
});
const domainClass = (0, nano_theme_1.rule)({
    ...styles_1.fonts.get('ui', 'mid', 1),
    fz: '14px',
    maxW: '100%',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
});
const linkClass = (0, nano_theme_1.rule)({
    ...styles_1.fonts.get('ui', 'bold', 1),
    fz: '16px',
    pd: `0 0 0 ${iconColumn}px`,
    maxW: '100%',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
});
const buttonGroupClass = (0, nano_theme_1.rule)({
    w: '60px',
    d: 'flex',
    ai: 'center',
    flexDirection: 'row-reverse',
    mr: '-4px',
    pd: '0',
});
const UrlDisplayLayout = ({ url, title }) => {
    const [t] = (0, use_t_1.useT)();
    const [domain, domainTruncated] = React.useMemo(() => {
        const parsed = (0, util_1.parseUrl)(url);
        const domain = parsed?.hostname || '';
        const domainTruncated = domain && domain.length > 32 ? `${domain.slice(0, 32)}...` : domain;
        return [domain, domainTruncated];
    }, [url]);
    return (React.createElement(Split_1.Split, { style: { width: '100%', maxWidth: '100%' } },
        React.createElement("div", { style: { maxWidth: 'calc(100% - 100px)' } },
            React.createElement(FixedColumn_1.FixedColumn, { left: iconColumn, style: { alignItems: 'center' } },
                React.createElement("div", null,
                    React.createElement("div", { className: iconClass },
                        React.createElement(Favicon_1.Favicon, { domain: domain, url: url }))),
                React.createElement("div", { className: domainClass }, title ? (React.createElement(React.Fragment, null,
                    React.createElement("strong", null, title),
                    " \u2022 ",
                    domainTruncated)) : (domainTruncated))),
            React.createElement("div", null,
                React.createElement("div", { className: linkClass },
                    React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer" }, url)))),
        React.createElement("div", { className: buttonGroupClass },
            React.createElement(CopyButton_1.CopyButton, { width: 48, height: 48, round: true, onCopy: () => url, tooltip: { anchor: {} } }),
            React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Open') },
                React.createElement(BasicButton_1.default, { width: 48, height: 48, round: true, to: url, target: "_blank", rel: "noopener noreferrer" },
                    React.createElement(Iconista_1.Iconista, { width: 16, height: 16, set: 'lucide', icon: "external-link" }))))));
};
exports.UrlDisplayLayout = UrlDisplayLayout;
//# sourceMappingURL=UrlDisplayLayout.js.map