/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from "@stencil/core";
import cn from "../../../global/lib/cn";
import { formatDateTime } from "../../../global/lib/format-date-time";
import { TriangleIcon } from "../../../global/assets/triangle-icon";
import { ActivationIcon } from "../../../global/assets/activation-icon";
const detailRows = [
    {
        label: 'serviceType',
        key: 'type',
        formatter: (item) => item.type.charAt(0).toUpperCase() + item.type.slice(1),
    },
    { label: 'activationDate', key: 'activatedAt' },
    { label: 'expireDate', key: 'expiresAt' },
    { label: 'claimAt', key: 'claimDate', formatter: item => formatDateTime(item.claimDate) },
    { label: 'claimingCompany', key: 'companyName' },
    { label: 'invoiceNumber', key: 'invoiceNumber' },
    { label: 'jobNumber', key: 'jobNumber' },
    { label: 'packageCode', key: 'packageCode' },
];
export const POPOVER_WIDTH = 540;
const HALF_POPOVER_WIDTH = POPOVER_WIDTH / 2;
const ARROW_PADDING = 19;
const ARROW_HALF_WIDTH = 25;
const VIEWPORT_PADDING = 16;
export const ClaimableItemPopover = ({ locale, item, target, popoverHeight, showPopover, fadingOut, contentFading, bodyContentHeight, claim, onMouseEnter, onMouseLeave, }) => {
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    const minArrowX = VIEWPORT_PADDING + ARROW_HALF_WIDTH;
    const maxArrowX = viewportWidth - VIEWPORT_PADDING - ARROW_HALF_WIDTH;
    const arrowX = Math.max(minArrowX, Math.min(target.centerX, maxArrowX));
    const fitsBelow = target.bottomY + ARROW_PADDING + popoverHeight + VIEWPORT_PADDING <= viewportHeight;
    const flipVertically = !fitsBelow;
    // Anchor by `bottom` when flipped so the popover's height doesn't drag its visible
    // position up/down between items with different content. Anchor by `top` otherwise.
    const verticalStyle = flipVertically
        ? { top: 'auto', bottom: `${viewportHeight - target.topY + ARROW_PADDING}px` }
        : { top: `${target.bottomY + ARROW_PADDING}px`, bottom: 'auto' };
    const left = arrowX - HALF_POPOVER_WIDTH;
    const naturalBodyLeft = arrowX - HALF_POPOVER_WIDTH;
    const naturalBodyRight = arrowX + HALF_POPOVER_WIDTH;
    let bodyOffset = 0;
    if (naturalBodyLeft < VIEWPORT_PADDING)
        bodyOffset = VIEWPORT_PADDING - naturalBodyLeft;
    else if (naturalBodyRight > viewportWidth - VIEWPORT_PADDING)
        bodyOffset = viewportWidth - VIEWPORT_PADDING - naturalBodyRight;
    return (h("div", { "aria-expanded": showPopover.toString(), dir: locale.sharedLocales.direction, style: Object.assign(Object.assign({}, verticalStyle), { left: `${left}px` }), class: cn('claimable-item-popover', { 'fading-out': fadingOut, 'content-fading': contentFading }), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, h("div", { class: "popover-relative-container" }, h("div", { class: cn('popover-arrow-icon', { flipped: flipVertically }) }, h(TriangleIcon, { class: "popover-arrow-icon-svg" }), h("div", { class: "popover-arrow-bottom-line" })), h("div", { style: { transform: `translateX(${bodyOffset}px)` }, class: "popover-body" }, h("div", { class: "popover-body-content", style: bodyContentHeight > 0 ? { height: `${bodyContentHeight}px` } : {} }, h("div", { class: "popover-body-inner" }, detailRows.map(row => (h("div", { class: "popover-info-row" }, h("b", null, locale[row.label]), h("div", { class: "popover-info-value" }, item ? ((row === null || row === void 0 ? void 0 : row.formatter) ? row.formatter(item) : item[row.key]) : '')))), (item === null || item === void 0 ? void 0 : item.claimable) && (h("button", { onClick: () => claim && claim(item), class: "claim-button" }, h(ActivationIcon, null), h("span", null, locale.claim)))))))));
};
