import * as React from 'react';
import { rule } from 'nano-theme';
import { FixedColumn } from 'nice-ui/lib/3-list-item/FixedColumn';
import { fonts } from 'nice-ui/lib/styles';
import BasicButton from 'nice-ui/lib/2-inline-block/BasicButton';
import { Iconista } from 'nice-ui/lib/icons/Iconista';
import { Split } from 'nice-ui/lib/3-list-item/Split';
import { BasicTooltip } from 'nice-ui/lib/4-card/BasicTooltip';
import { useT } from 'use-t';
import { Favicon } from '../../../components/Favicon';
import { parseUrl } from '../../../web/util';
import { CopyButton } from './CopyButton';
const iconColumn = 40;
const iconClass = 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 = rule({
    ...fonts.get('ui', 'mid', 1),
    fz: '14px',
    maxW: '100%',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
});
const linkClass = rule({
    ...fonts.get('ui', 'bold', 1),
    fz: '16px',
    pd: `0 0 0 ${iconColumn}px`,
    maxW: '100%',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
});
const buttonGroupClass = rule({
    w: '60px',
    d: 'flex',
    ai: 'center',
    flexDirection: 'row-reverse',
    mr: '-4px',
    pd: '0',
});
export const UrlDisplayLayout = ({ url, title }) => {
    const [t] = useT();
    const [domain, domainTruncated] = React.useMemo(() => {
        const parsed = 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, { style: { width: '100%', maxWidth: '100%' } },
        React.createElement("div", { style: { maxWidth: 'calc(100% - 100px)' } },
            React.createElement(FixedColumn, { left: iconColumn, style: { alignItems: 'center' } },
                React.createElement("div", null,
                    React.createElement("div", { className: iconClass },
                        React.createElement(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, { width: 48, height: 48, round: true, onCopy: () => url, tooltip: { anchor: {} } }),
            React.createElement(BasicTooltip, { nowrap: true, renderTooltip: () => t('Open') },
                React.createElement(BasicButton, { width: 48, height: 48, round: true, to: url, target: "_blank", rel: "noopener noreferrer" },
                    React.createElement(Iconista, { width: 16, height: 16, set: 'lucide', icon: "external-link" }))))));
};
//# sourceMappingURL=UrlDisplayLayout.js.map