import { StatusChip } from "../../dataDisplay/status/StatusChip.mjs";
import { GridRow } from "../../../layout/GridRow.mjs";
import { GridUnit } from "../../../layout/GridUnit.mjs";
import { CompactCard } from "./CompactCard.mjs";
import { isEqualIgnoreFunctions } from "../utilities/MapUtilities.mjs";
import React, { useCallback, useEffect, useState } from "react";
import { Typography, makeStyles } from "@material-ui/core";
import { MapPinIcon, ViewIcon } from "@fluentui/react-icons";
import { useTranslation } from "react-i18next";
import { startCase } from "lodash-es";
//#region src/UI/mapLayout/ui/ListView.jsx
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();
	useEffect(() => {
		if (!chipConfig || chipConfig.length === 0) {
			setFilteredData(data);
			setActiveChip(null);
			return;
		}
		const defaultChip = chipConfig.find((chip) => chip?.default) ?? 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) setActiveChip(defaultChip);
		}
	}, [chipConfig, activeChip]);
	useEffect(() => {
		if (!chipConfig || chipConfig.length === 0) {
			setFilteredData(data);
			return;
		}
		if (activeChip?.filterData) setFilteredData(activeChip.filterData(data, activeChip));
		else setFilteredData(data);
	}, [activeChip, data]);
	const handleOnClickChip = useCallback((chip) => {
		if (chip?.onClick) chip?.onClick(data, chip);
		setActiveChip(chip);
	}, [data]);
	return /* @__PURE__ */ React.createElement("div", null, chipConfig?.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classes.chipContainer }, chipConfig?.map((chip, index) => {
		return /* @__PURE__ */ React.createElement(StatusChip, {
			key: `${index}-${chip?.label}`,
			label: chip?.label,
			status: chip?.id === activeChip?.id ? "info" : "default",
			variant: "outlined",
			icon: chip?.icon,
			onClick: () => {
				console.log("chip clicked", chip);
				handleOnClickChip(chip);
			},
			isActionable: !chip?.disabled
		});
	})), activeChip?.content && /* @__PURE__ */ React.createElement("div", { className: classes.chipContent }, activeChip?.content), filteredData?.length > 0 ? filteredData?.map((record, index) => {
		const extendedListData = listViewConfig?.extendedListFields?.map((item) => {
			return {
				label: startCase(item),
				value: record[item] ?? "N/A"
			};
		});
		const iconButtons = [
			...listViewConfig?.iconButtons?.map((config) => ({
				...config,
				onClick: () => {
					if (config?.onClick) config?.onClick(record);
				}
			})) ?? [],
			{
				title: t("Show Marker"),
				icon: MapPinIcon,
				onClick: () => {
					showMarkerEvent(record);
				}
			},
			{
				title: t("View"),
				icon: ViewIcon,
				onClick: () => {
					viewEvent(record);
				}
			}
		];
		const title = listViewConfig?.getTitle ? listViewConfig?.getTitle(record) : record[listViewConfig?.titleField];
		return /* @__PURE__ */ React.createElement(GridRow, null, /* @__PURE__ */ React.createElement(GridUnit, null, /* @__PURE__ */ React.createElement(CompactCard, {
			id: index,
			title,
			primaryText: record[listViewConfig?.primaryTextField],
			secondaryText: record[listViewConfig?.secondaryTextField],
			status: record[listViewConfig?.statusColor]?.toLowerCase(),
			statusLabel: record[listViewConfig?.statusLabel],
			statusVariant: listViewConfig?.statusVariant,
			showAdornment: listViewConfig?.showAdornment,
			avatar: record[listViewConfig?.avatar],
			imageAvatarSrc: record[listViewConfig?.imageAvatarSrc],
			noWrap: noWrapPrimaryText,
			extendedList: extendedListData,
			iconButtons
		})));
	}) : /* @__PURE__ */ React.createElement("div", { className: classes.noDataWrapper }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, t("No Data"))));
};
//#endregion
export { ListView as default };

//# sourceMappingURL=ListView.mjs.map