import React, { forwardRef, useCallback, useImperativeHandle, useRef, } from 'react';
import { st, classes } from './Thumbnail.st.css.js';
import { CheckboxChecked } from '@wix/wix-ui-icons-common/system';
import Text from '../Text';
import { withFocusable } from '../common/Focusable';
import { dataHooks } from './constants';
import Box from '../Box';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
const isString = (a) => typeof a === 'string';
/**
 * Component for showing thumbnails.
 *
 * It takes full space of parent component, works well together with `<Proportion />`
 * */
const Thumbnail = forwardRef((props, ref) => {
    const { dataHook, className, ariaLabel, border = true, children, title, description, image, size = 'medium', selected = false, disabled = false, hideSelectedIcon, backgroundImage, onClick, onMouseOver, width, height, contentAlignment = 'center', ellipsis = false, maxLines, textPosition = 'inside', noPadding = false, tooltipProps = {}, skin = 'primary', focusableOnFocus, focusableOnBlur, } = props;
    const icons = useIcons('Thumbnail', {
        CheckboxChecked,
    });
    const thumbnailRef = useRef(null);
    const hasChildren = !!children;
    const hasBackground = !!backgroundImage;
    const showBottomTitle = (hasChildren || hasBackground) && title;
    useImperativeHandle(ref, () => ({
        focus: () => {
            thumbnailRef.current?.focus();
        },
    }));
    const renderBackgroundLayout = () => {
        return isString(backgroundImage) ? (React.createElement("div", { className: st(classes.backgroundImage, { disabled }), "data-hook": dataHooks.thumbnailBackgroundImage, style: { backgroundImage: `url(${backgroundImage})` } })) : (backgroundImage);
    };
    const renderBottomTitle = () => {
        return (React.createElement(Box, { align: "center" },
            React.createElement(Text, { className: st(classes.bottomTitle, { selected, disabled }), dataHook: dataHooks.thumbnailBottomTitle, size: size, tagName: "div", weight: "thin", ellipsis: true, children: title, tooltipProps: tooltipProps })));
    };
    const renderThumbnailImage = () => {
        return (React.createElement("div", { className: st(classes.imageContainer, { textPosition }), "data-hook": dataHooks.thumbnailImage }, isString(image) ? (React.createElement("img", { src: image, className: st(classes.image, { textPosition }), alt: "" })) : (image)));
    };
    const renderTitleAndDescription = () => {
        return (React.createElement("div", { className: st(classes.thumbnailTextContent, { textPosition, size }) },
            title && (React.createElement(Text, { className: st(classes.title, { size, textPosition }), dataHook: dataHooks.thumbnailTitle, size: size, weight: "normal", children: title, skin: disabled ? 'disabled' : undefined, ellipsis: ellipsis, maxLines: maxLines, tooltipProps: tooltipProps })),
            description && (React.createElement(Text, { className: classes.description, dataHook: dataHooks.thumbnailDescription, size: size, weight: "thin", secondary: true, children: description, skin: disabled ? 'disabled' : undefined, ellipsis: ellipsis, maxLines: maxLines, tooltipProps: tooltipProps }))));
    };
    const renderSelectedIcon = useCallback(() => (React.createElement("div", { className: classes.selectedIcon, "data-hook": dataHooks.thumbnailSelectedIcon },
        React.createElement(icons.CheckboxChecked, { height: "7.8", width: "10" }))), [icons]);
    const getThumbnailContent = () => {
        /**
         * Ignores the rest of the properties and just renders children
         */
        if (hasChildren) {
            return (React.createElement("div", { className: st(classes.customChild, { disabled }) }, children));
        }
        /**
         * @deprecated flow
         */
        if (hasBackground) {
            return renderBackgroundLayout();
        }
        return (React.createElement("div", { className: st(classes.contentContainer, { textPosition }) },
            image && renderThumbnailImage(),
            textPosition === 'inside' && renderTitleAndDescription()));
    };
    const renderThumbnail = () => {
        return (React.createElement("div", { ref: thumbnailRef, style: { height }, className: st(classes.thumbnail, {
                selected,
                disabled,
                size,
                hasBackground,
                hasChildren,
                textPosition,
                contentAlignment,
                noPadding,
                border,
                skin,
            }), "data-selected": selected, "data-disabled": disabled, tabIndex: disabled ? undefined : 0, "data-hook": dataHooks.thumbnailWrapper, onFocus: focusableOnFocus, onBlur: focusableOnBlur },
            !hideSelectedIcon && selected && renderSelectedIcon(),
            getThumbnailContent()));
    };
    const onKeyDown = (event) => {
        if (onClick && ['Enter', ' '].includes(event.key)) {
            onClick(event);
        }
    };
    return (React.createElement("div", { style: { width }, className: st(classes.root, { disabled, border, selected, textPosition, skin }, className), "aria-label": ariaLabel, onClick: disabled ? undefined : onClick, onMouseOver: disabled ? undefined : onMouseOver, onKeyDown: disabled ? undefined : onKeyDown, "data-hook": dataHook },
        renderThumbnail(),
        textPosition === 'outside' && renderTitleAndDescription(),
        showBottomTitle ? renderBottomTitle() : null));
});
Thumbnail.displayName = 'Thumbnail';
export default withFocusable(Thumbnail);
//# sourceMappingURL=Thumbnail.js.map