import React, { useEffect, useMemo, useState } from 'react';
import { startCase } from 'lodash-es';
import { PopoverCard } from './PopoverCard';
import { getLayer } from '../utilities/MapUtilities';
const PopoverOverlay = (props) => {
    var _a;
    const { data, config, showDetailsButton, detailsEvent, primaryActions, moreIconActions, readOnlyLayers, layerKeys, layerKeySeparator, getMessage, getMessageIcon, hideMessageIcon, width = '370px' } = props;
    const [show, setShow] = useState(false);
    useEffect(() => {
        setShow(data ? true : false);
    }, [data]);
    const listData = useMemo(() => {
        var _a;
        if (!data || !config)
            return [];
        const listConfig = (config === null || config === void 0 ? void 0 : config.popoverCardListFields) || (config === null || config === void 0 ? void 0 : config.extendedListFields);
        return ((_a = listConfig === null || listConfig === void 0 ? void 0 : listConfig.map((item) => {
            var _a;
            return ({
                subject: startCase(item),
                value: (_a = data[item]) !== null && _a !== void 0 ? _a : 'N/A'
            });
        })) !== null && _a !== void 0 ? _a : []);
    }, [config, data]);
    const isReadOnly = useMemo(() => {
        if (data && (readOnlyLayers === null || readOnlyLayers === void 0 ? void 0 : readOnlyLayers.length) > 0) {
            const layer = getLayer(layerKeys, layerKeySeparator, data);
            return readOnlyLayers.includes(layer);
        }
        return false;
    }, [data, layerKeySeparator, layerKeys, readOnlyLayers]);
    return (React.createElement("div", null, show && (React.createElement(PopoverCard, { data: data, title: data === null || data === void 0 ? void 0 : data[config === null || config === void 0 ? void 0 : config.titleField], listData: listData, status: (_a = data === null || data === void 0 ? void 0 : data[config === null || config === void 0 ? void 0 : config.statusColor]) === null || _a === void 0 ? void 0 : _a.toLowerCase(), detailsEvent: showDetailsButton
            ? () => {
                detailsEvent(data);
            }
            : null, primaryActions: isReadOnly ? [] : primaryActions, moreIconActions: isReadOnly ? [] : moreIconActions, message: getMessage ? getMessage(data) : null, messageIcon: getMessageIcon ? getMessageIcon(data) : null, hideMessageIcon: hideMessageIcon, onClose: () => {
            setShow(false);
        }, width: width }))));
};
export default PopoverOverlay;
//# sourceMappingURL=PopoverOverlay.js.map