import React, { PureComponent } from 'react';
import Card from '../Card';
import Button from '../Button';
import TextButton from '../TextButton';
import Text from '../Text';
import Heading from '../Heading';
import Proportion from '../Proportion';
import Tooltip from '../Tooltip';
import MediaOverlay from '../MediaOverlay';
import { DATA_HOOKS } from './CardGalleryItem.constants';
import { classes, st } from './CardGalleryItem.st.css.js';
import { DragHandle } from '../DragHandle/DragHandle';
import Image from '../Image';
import { DraggableContainer } from '../DraggableContainer/DraggableContainer';
class CardGalleryItem extends PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            isHovered: false,
            isFocused: false,
        };
        this._onMouseEnter = () => {
            this.setState({ isHovered: true });
        };
        this._onMouseLeave = () => {
            this.setState({ isHovered: false });
        };
        this._onFocus = e => {
            try {
                if (process.env.NODE_ENV === 'test' ||
                    e.target.matches(':focus-visible')) {
                    this.setState({ isFocused: true });
                }
            }
            catch {
                this.setState({ isFocused: true });
            }
        };
        this._onBlur = () => {
            this.setState({ isFocused: false });
        };
    }
    _hasFooter() {
        const { title, subtitle, suffix, imagePlacement } = this.props;
        return !!(title || subtitle || suffix || imagePlacement === 'side');
    }
    _renderBadge() {
        return (React.createElement("div", { className: classes.badgeWrapper, "data-hook": DATA_HOOKS.Badge }, this.props.badge));
    }
    _renderDragHandle() {
        const { dragHandleProps, dragging, dragDisabled } = this.props;
        return (React.createElement(DragHandle, { ...dragHandleProps, dragging: dragging, disabled: dragDisabled, dataHook: DATA_HOOKS.dragHandle }));
    }
    _renderFooter() {
        const { title, subtitle, size, suffix, draggable, imagePlacement, backgroundImageNode, backgroundImageUrl, settingsMenu, } = this.props;
        const heading = size === 'medium' && imagePlacement !== 'side' ? (React.createElement(Heading, { className: classes.titleHeading, size: "small", ellipsis: true, dataHook: DATA_HOOKS.Title }, title)) : (React.createElement(Text, { className: classes.titleText, size: "small", weight: "normal", ellipsis: true, dataHook: DATA_HOOKS.Title }, title));
        const textSize = imagePlacement === 'side' ? 'tiny' : size === 'medium' ? 'small' : 'tiny';
        return (React.createElement(React.Fragment, null,
            React.createElement("div", { className: classes.footer, "data-hook": DATA_HOOKS.footer },
                draggable && (React.createElement("div", { className: classes.dragHandleWrapper }, this._renderDragHandle())),
                imagePlacement === 'side' && (React.createElement("div", { className: st(classes.footerImage, { size }), "data-hook": DATA_HOOKS.footerImage }, backgroundImageUrl ? (React.createElement(Image, { src: backgroundImageUrl })) : (backgroundImageNode))),
                React.createElement("div", { className: classes.footerContent },
                    heading,
                    React.createElement(Text, { size: textSize, secondary: true, ellipsis: true, dataHook: DATA_HOOKS.Subtitle }, subtitle)),
                suffix && (React.createElement("div", { className: classes.footerSuffix, "data-hook": DATA_HOOKS.suffix }, suffix)),
                imagePlacement === 'side' &&
                    settingsMenu &&
                    this._renderSettingsMenu())));
    }
    _renderActions() {
        const { primaryActionProps, secondaryActionProps, draggable } = this.props;
        const { label, disabled, disabledMessage } = primaryActionProps;
        const primaryAction = (React.createElement(Button, { dataHook: DATA_HOOKS.PrimaryAction, disabled: disabled, skin: "light", onPointerDown: draggable ? e => e.stopPropagation() : undefined }, label));
        return (React.createElement("div", { className: classes.primaryAction, "data-hook": DATA_HOOKS.HoverContent },
            disabled && disabledMessage ? (React.createElement(Tooltip, { disabled: !disabled, content: disabledMessage }, primaryAction)) : (primaryAction),
            secondaryActionProps && (React.createElement("div", { className: classes.secondaryAction },
                React.createElement(TextButton, { skin: "light", onClick: (event) => {
                        if (secondaryActionProps.onClick) {
                            secondaryActionProps.onClick(event);
                        }
                        event.stopPropagation();
                    }, dataHook: DATA_HOOKS.SecondaryAction, onPointerDown: draggable
                        ? (e) => e.stopPropagation()
                        : undefined }, secondaryActionProps.label)))));
    }
    _renderSettingsMenu() {
        return (React.createElement("div", { className: classes.settingsMenu, "data-hook": DATA_HOOKS.SettingsMenu }, this.props.settingsMenu));
    }
    render() {
        const { primaryActionProps, dataHook, badge, backgroundImageUrl, backgroundImageNode, settingsMenu, size, draggable, dragging, droppable, dragDisabled, tabIndex, aspectRatio, imagePlacement, showSuffixOnHover, suffix, skin, skinVisibility, footer, } = this.props;
        const { isHovered } = this.state;
        const withCustomFooter = !!footer && imagePlacement === 'top';
        const withFooter = !!this._hasFooter();
        const isInteractive = !!primaryActionProps;
        const showActions = !dragging && !droppable && isInteractive;
        const withFloatingDragHandle = !!draggable && !withFooter;
        const withHover = showActions || withFloatingDragHandle;
        const showShadow = skin === 'standard' && (skinVisibility === 'always' || isHovered);
        return (React.createElement(DraggableContainer, { draggable: draggable && !showActions, dragging: dragging, dim: true, dragDisabled: dragDisabled, tabIndex: tabIndex, className: st(classes.root, {
                withFooter,
                size,
                dragging,
                dragDisabled,
                draggable,
                showActions,
                imagePlacement,
                showSuffixOnHover,
                suffix: !!suffix,
            }), "data-hook": dataHook, onFocus: this._onFocus, onBlur: this._onBlur },
            React.createElement("div", { className: classes.container, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: primaryActionProps?.onClick, "data-hook": DATA_HOOKS.Container },
                React.createElement(Card, { stretchVertically: true, showShadow: showShadow, dataHook: DATA_HOOKS.Card, className: st(classes.cardContainer, {
                        skin,
                        skinVisibility,
                        isInteractive,
                    }) },
                    imagePlacement === 'top' && (React.createElement(Proportion, { aspectRatio: aspectRatio },
                        React.createElement(MediaOverlay, { media: backgroundImageUrl || backgroundImageNode || '', className: classes.overlay, hoverSkin: withHover ? 'dark' : undefined, hovered: this.state.isHovered || this.state.isFocused, dataHook: DATA_HOOKS.HoverComponent },
                            showActions && (React.createElement(MediaOverlay.Content, { visible: "hover" }, this._renderActions())),
                            settingsMenu && showActions && (React.createElement(MediaOverlay.Content, { visible: "hover", placement: "top-end" }, this._renderSettingsMenu()))),
                        badge && this._renderBadge(),
                        React.createElement("div", { className: classes.dragHandleFloatingWrapper }, withFloatingDragHandle && this._renderDragHandle()))),
                    withFooter && this._renderFooter(),
                    withCustomFooter && (React.createElement("div", { "data-hook": DATA_HOOKS.customFooter }, footer))))));
    }
}
CardGalleryItem.displayName = 'CardGalleryItem';
CardGalleryItem.defaultProps = {
    aspectRatio: 1.6,
    size: 'medium',
    imagePlacement: 'top',
    showSuffixOnHover: false,
    skin: 'standard',
    skinVisibility: 'always',
};
export default CardGalleryItem;
//# sourceMappingURL=CardGalleryItem.js.map