/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from "@stencil/core";
import cn from "../../../global/lib/cn";
import expiredIcon from "~assets/expired.svg";
import pendingIcon from "~assets/pending.svg";
import cancelledIcon from "~assets/cancelled.svg";
import processedIcon from "~assets/processed.svg";
import activationRequiredIcon from "~assets/activationRequired.svg";
const icons = {
    expired: expiredIcon,
    pending: pendingIcon,
    processed: processedIcon,
    cancelled: cancelledIcon,
    activationRequired: activationRequiredIcon,
};
export const ClaimableItem = ({ item, locale, addStatusClass, setClaimableItemPopover }) => {
    const removeLoadAnimationClass = (event) => {
        const component = event.target;
        component.classList.remove('load-animation');
    };
    let headerEl;
    const openPopover = () => setClaimableItemPopover(true, item, headerEl);
    const closePopover = () => setClaimableItemPopover(false);
    return (h("div", { class: cn('claimable-item', { [item.status]: addStatusClass }) }, h("div", { class: "claimable-item-container" }, h("div", { ref: el => (headerEl = el), onBlur: closePopover, onClick: openPopover, onMouseEnter: openPopover, onMouseLeave: closePopover, onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-header load-animation" }, h("img", { src: icons[item.status], alt: "status icon" }), h("div", null, locale[item === null || item === void 0 ? void 0 : item.status])), h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-circle load-animation" }), h("div", { onAnimationEnd: removeLoadAnimationClass, class: "claimable-item-footer load-animation" }, item === null || item === void 0 ? void 0 : item.name))));
};
