import React, { useState, useCallback, useEffect } from 'react';
import { startCase } from 'lodash-es';
import { CompactCard } from './CompactCard';
import { makeStyles, Typography } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import { MapPinIcon, ViewIcon } from '@fluentui/react-icons';
import { GridRow } from '../../../layout/GridRow';
import { GridUnit } from '../../../layout/GridUnit';
import { StatusChip } from '../../dataDisplay/status/StatusChip';
import { isEqualIgnoreFunctions } from '../utilities/MapUtilities';
const useStyles = makeStyles((theme) => ({
    noDataWrapper: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)'
    },
    chipContainer: {
        display: 'flex',
        gap: theme.spacing(1),
        flexWrap: 'wrap',
        marginTop: theme.spacing(1),
        margin: theme.spacing(0, 1)
    },
    chipContent: {
        margin: theme.spacing(1),
        marginBottom: 0
    }
}));
const ListView = (props) => {
    const { data, listViewConfig, noWrapPrimaryText, viewEvent, showMarkerEvent, chipConfig } = props;
    const [activeChip, setActiveChip] = useState(null);
    const [filteredData, setFilteredData] = useState(data);
    const { t } = useTranslation();
    const classes = useStyles();
    //Set default active chip only when chipConfig changes
    useEffect(() => {
        var _a;
        if (!chipConfig || chipConfig.length === 0) {
            setFilteredData(data);
            setActiveChip(null);
            return;
        }
        const defaultChip = (_a = chipConfig.find((chip) => chip === null || chip === void 0 ? void 0 : chip.default)) !== null && _a !== void 0 ? _a : chipConfig[0];
        if (!activeChip) {
            setActiveChip(defaultChip);
        }
        else {
            const updatedChip = chipConfig.find((chip) => chip.id === activeChip.id);
            if (updatedChip &&
                (updatedChip !== activeChip ||
                    !isEqualIgnoreFunctions(updatedChip, activeChip))) {
                setActiveChip(updatedChip);
            }
            else if (!updatedChip) {
                // activeChip no longer exists in new config
                setActiveChip(defaultChip);
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [chipConfig, activeChip]);
    //Update filtered data whenever data or activeChip changes
    useEffect(() => {
        if (!chipConfig || chipConfig.length === 0) {
            setFilteredData(data);
            return;
        }
        if (activeChip === null || activeChip === void 0 ? void 0 : activeChip.filterData) {
            setFilteredData(activeChip.filterData(data, activeChip));
        }
        else {
            setFilteredData(data);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [activeChip, data]);
    const handleOnClickChip = useCallback((chip) => {
        if (chip === null || chip === void 0 ? void 0 : chip.onClick) {
            chip === null || chip === void 0 ? void 0 : chip.onClick(data, chip);
        }
        setActiveChip(chip);
    }, [data]);
    return (React.createElement("div", null, (chipConfig === null || chipConfig === void 0 ? void 0 : chipConfig.length) > 0 && (React.createElement("div", { className: classes.chipContainer }, chipConfig === null || chipConfig === void 0 ? void 0 : chipConfig.map((chip, index) => {
        return (React.createElement(StatusChip, { key: `${index}-${chip === null || chip === void 0 ? void 0 : chip.label}`, label: chip === null || chip === void 0 ? void 0 : chip.label, status: (chip === null || chip === void 0 ? void 0 : chip.id) === (activeChip === null || activeChip === void 0 ? void 0 : activeChip.id) ? 'info' : 'default', variant: "outlined", icon: chip === null || chip === void 0 ? void 0 : chip.icon, onClick: () => {
                console.log('chip clicked', chip);
                handleOnClickChip(chip);
            }, isActionable: !(chip === null || chip === void 0 ? void 0 : chip.disabled) }));
    }))), (activeChip === null || activeChip === void 0 ? void 0 : activeChip.content) && (React.createElement("div", { className: classes.chipContent }, activeChip === null || activeChip === void 0 ? void 0 : activeChip.content)), (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? (filteredData === null || filteredData === void 0 ? void 0 : filteredData.map((record, index) => {
        var _a, _b, _c;
        var _d;
        const extendedListData = (_a = listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.extendedListFields) === null || _a === void 0 ? void 0 : _a.map((item) => {
            var _a;
            return {
                label: startCase(item),
                value: (_a = record[item]) !== null && _a !== void 0 ? _a : 'N/A'
            };
        });
        const buttons = (_d = (_b = listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.iconButtons) === null || _b === void 0 ? void 0 : _b.map((config) => (Object.assign(Object.assign({}, config), { onClick: () => {
                if (config === null || config === void 0 ? void 0 : config.onClick) {
                    config === null || config === void 0 ? void 0 : config.onClick(record);
                }
            } })))) !== null && _d !== void 0 ? _d : [];
        const iconButtons = [
            ...buttons,
            {
                title: t('Show Marker'),
                icon: MapPinIcon,
                onClick: () => {
                    showMarkerEvent(record);
                }
            },
            {
                title: t('View'),
                icon: ViewIcon,
                onClick: () => {
                    viewEvent(record);
                }
            }
        ];
        const title = (listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.getTitle)
            ? listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.getTitle(record)
            : record[listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.titleField];
        return (React.createElement(GridRow, null, React.createElement(GridUnit, null, React.createElement(CompactCard, { id: index, title: title, primaryText: record[listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.primaryTextField], secondaryText: record[listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.secondaryTextField], status: (_c = record[listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.statusColor]) === null || _c === void 0 ? void 0 : _c.toLowerCase(), statusLabel: record[listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.statusLabel], statusVariant: listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.statusVariant, showAdornment: listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.showAdornment, avatar: record[listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.avatar], imageAvatarSrc: record[listViewConfig === null || listViewConfig === void 0 ? void 0 : listViewConfig.imageAvatarSrc], noWrap: noWrapPrimaryText, extendedList: extendedListData, iconButtons: iconButtons }))));
    })) : (React.createElement("div", { className: classes.noDataWrapper }, React.createElement(Typography, { variant: "body1" }, t('No Data'))))));
};
export default ListView;
//# sourceMappingURL=ListView.js.map