Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../../chunk-BN4qSVkS.cjs");
const require_styles_colors = require("../../styles/colors.cjs");
const require_styles_themes = require("../../styles/themes.cjs");
const require_components_Icon_Icon = require("../Icon/Icon.cjs");
const require_components_Button = require("../Button.cjs");
const require_styles_tokens_spacing = require("../../styles/tokens/spacing.cjs");
const require_components_TextInput = require("../TextInput.cjs");
const require_components_Flex = require("../Flex.cjs");
const require_components_Dropdown = require("../Dropdown.cjs");
const require_components_typography_Body = require("../typography/Body.cjs");
const require_components_typography_Label = require("../typography/Label.cjs");
require("./filters.cjs");
const require_components_DataManagerTable_BooleanFilter = require("./BooleanFilter.cjs");
require("./date_utils.cjs");
const require_components_DataManagerTable_DateFilter = require("./DateFilter.cjs");
const require_components_DataManagerTable_EnumFilter = require("./EnumFilter.cjs");
const require_components_DataManagerTable_IdFilter = require("./IdFilter.cjs");
const require_components_DataManagerTable_StringFilter = require("./StringFilter.cjs");
const require_components_DataManagerTable_utils = require("./utils.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let lodash_es = require("lodash-es");
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let _lightsparkdev_core = require("@lightsparkdev/core");
let _wojtekmaj_react_datetimerange_picker = require("@wojtekmaj/react-datetimerange-picker");
_wojtekmaj_react_datetimerange_picker = require_chunk.__toESM(_wojtekmaj_react_datetimerange_picker);
let dayjs = require("dayjs");
dayjs = require_chunk.__toESM(dayjs);
let dayjs_plugin_utc_js = require("dayjs/plugin/utc.js");
dayjs_plugin_utc_js = require_chunk.__toESM(dayjs_plugin_utc_js);
//#region src/components/DataManagerTable/PillFilter.tsx
dayjs.default.extend(dayjs_plugin_utc_js.default);
function PillFilter({ filter, state, onUpdateFilter, onDelete, customComponents }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(FilterContainer, { children: [
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Property, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_typography_Label.Label, {
			size: "Small",
			content: filter.label
		}) }),
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Operator, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_typography_Body.Body, {
			size: "Small",
			color: "secondary",
			content: getOperatorLabel(filter)
		}) }),
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterDropdown, {
			filterAndState: {
				filter,
				state
			},
			onUpdateFilter,
			customComponents
		}),
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DeleteButton, {
			onClick: onDelete,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
				name: "CentralCrossSmall",
				color: "secondary",
				width: 16,
				iconProps: { strokeWidth: "3px" }
			})
		})
	] });
}
function getOperatorLabel(filter) {
	switch (filter.type) {
		case "enum": return "is";
		case "date": return "is";
		case "string": return "is";
		case "id": return "is";
		case "boolean": return "is";
		default: return "is";
	}
}
function formatDateValue(date) {
	return dayjs.default.utc(date).format("MMM DD, HH:mm");
}
function getFilterValue(state) {
	if (require_components_DataManagerTable_EnumFilter.isEnumFilterState(state)) return state.appliedValues?.join(", ").replaceAll("_", " ") || "Empty";
	else if (require_components_DataManagerTable_StringFilter.isStringFilterState(state)) return state.appliedValues?.join(", ") || "Empty";
	else if (require_components_DataManagerTable_IdFilter.isIdFilterState(state)) return state.appliedValues?.join(", ") || "Empty";
	else if (require_components_DataManagerTable_DateFilter.isDateFilterState(state)) return state.start && state.end ? `${formatDateValue(state.start)} - ${formatDateValue(state.end)}` : "Empty";
	else if (require_components_DataManagerTable_BooleanFilter.isBooleanFilterState(state)) return state.value ? "True" : "False";
	throw new Error("Invalid filter state");
}
const commonDropdownGetCSS = ({ isOpen, theme }) => {
	return {
		borderRight: `0.5px solid ${require_styles_themes.getColor(theme, ["controls", "border"])}`,
		display: "flex",
		justifyContent: "center",
		alignItems: "center"
	};
};
const commonDropdownProps = {
	getCSS: commonDropdownGetCSS,
	align: "left"
};
function FilterDropdown({ filterAndState, onUpdateFilter, customComponents }) {
	const [stringFilterValue, setStringFilterValue] = (0, react.useState)("");
	const [dates, setDates] = (0, react.useState)(null);
	const [isOpen, setIsOpen] = (0, react.useState)(false);
	const DropdownComponent = customComponents?.customDropdown || require_components_Dropdown.Dropdown;
	if (require_components_DataManagerTable_utils.isEnumFilterAndState(filterAndState)) {
		const { filter, state } = filterAndState;
		return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownComponent, {
			...commonDropdownProps,
			button: { getContent: ({ isOpen, theme }) => {
				return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Value, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_typography_Label.Label, {
					size: "Small",
					content: (0, lodash_es.capitalize)(getFilterValue(state)),
					color: state.appliedValues?.length && state.appliedValues.length > 0 ? "text" : "secondary"
				}) });
			} },
			dropdownItems: filter.enumValues.map((option) => ({
				label: option.label,
				onClick: () => {
					const optionValues = (0, _lightsparkdev_core.ensureArray)(option.value);
					let updatedAppliedValues = [];
					if (filter.isMulti) updatedAppliedValues = state.appliedValues ? [...state.appliedValues.filter((appliedValue) => appliedValue !== option.value), ...optionValues] : [...optionValues];
					else updatedAppliedValues = [...optionValues];
					onUpdateFilter({
						...state,
						value: option.label,
						isApplied: true,
						appliedValues: updatedAppliedValues
					});
				}
			}))
		});
	} else if (require_components_DataManagerTable_utils.isStringFilterAndState(filterAndState) || require_components_DataManagerTable_utils.isIdFilterAndState(filterAndState)) {
		const TextInputComponent = customComponents?.customTextInput || require_components_TextInput.TextInput;
		const { filter, state } = filterAndState;
		const handleApplyFilter = () => {
			let updatedAppliedValues = [];
			if (filter.isMulti) updatedAppliedValues = state.appliedValues ? [...state.appliedValues.filter((appliedValue) => appliedValue !== stringFilterValue), stringFilterValue] : [stringFilterValue];
			else updatedAppliedValues = [stringFilterValue];
			onUpdateFilter({
				...state,
				appliedValues: updatedAppliedValues,
				value: stringFilterValue,
				isApplied: true
			});
			setIsOpen(false);
		};
		return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownComponent, {
			...commonDropdownProps,
			isOpen,
			onOpen: () => setIsOpen(true),
			onClose: () => setIsOpen(false),
			button: { getContent: ({ isOpen, theme }) => {
				return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Value, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_typography_Label.Label, {
					size: "Small",
					content: getFilterValue(state),
					color: state.appliedValues?.length && state.appliedValues.length > 0 ? "text" : "secondary"
				}) });
			} },
			dropdownContent: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_components_Flex.Flex, {
				column: true,
				gap: 8,
				pt: 8,
				pr: 8,
				pb: 8,
				pl: 8,
				width: 240,
				children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TextInputComponent, {
					placeholder: "Enter value",
					value: stringFilterValue,
					onChange: (value) => {
						setStringFilterValue(value);
					},
					onKeyDown: (keyValue, event) => {
						if (keyValue === "Enter") handleApplyFilter();
					}
				}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
					kind: "primary",
					text: "Apply",
					typography: { type: "Btn" },
					fullWidth: true,
					onClick: handleApplyFilter
				})]
			})
		});
	} else if (require_components_DataManagerTable_utils.isBooleanFilterAndState(filterAndState)) {
		const { state } = filterAndState;
		return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownComponent, {
			...commonDropdownProps,
			button: { getContent: ({ isOpen, theme }) => {
				return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Value, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_typography_Label.Label, {
					size: "Small",
					content: (0, lodash_es.capitalize)(getFilterValue(state))
				}) });
			} },
			dropdownItems: ["True", "False"].map((option) => ({
				label: option,
				onClick: () => {
					onUpdateFilter({
						...state,
						value: option,
						isApplied: true
					});
				}
			}))
		});
	} else if (require_components_DataManagerTable_utils.isDateFilterAndState(filterAndState)) {
		const { state } = filterAndState;
		const isValidDateRange = (dates) => {
			return dates instanceof Array && dates.length === 2 && dates[0] !== null && dates[1] !== null;
		};
		const handleCalendarChange = (dates) => {
			if (!isValidDateRange(dates)) return;
			setDates(dates);
		};
		const updateCalendarState = (dates) => {
			if (!isValidDateRange(dates)) return;
			const start = dayjs.default.utc(dates[0]).add((0, dayjs.default)().utcOffset(), "minutes").toDate();
			const end = dayjs.default.utc(dates[1]).add((0, dayjs.default)().utcOffset(), "minutes").toDate();
			onUpdateFilter({
				...state,
				preset: "Custom",
				isApplied: true,
				customRangeOperation: "is between",
				start,
				end
			});
			setIsOpen(false);
		};
		return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DropdownComponent, {
			...commonDropdownProps,
			isOpen,
			onOpen: () => setIsOpen(true),
			onClose: () => setIsOpen(false),
			button: { getContent: ({ isOpen, theme }) => {
				return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Value, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_typography_Label.Label, {
					size: "Small",
					content: getFilterValue(state),
					color: state.start && state.end ? "text" : "secondary"
				}) });
			} },
			dropdownContent: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_wojtekmaj_react_datetimerange_picker.default, {
				onChange: handleCalendarChange,
				isCalendarOpen: isOpen,
				shouldCloseWidgets: () => isOpen === false,
				shouldOpenWidgets: () => isOpen === true,
				onFocus: () => setIsOpen(true),
				value: dates,
				locale: "en-US",
				autoFocus: true,
				formatShortWeekday: (locale, date) => {
					return (0, lodash_es.capitalize)(date.toLocaleDateString(locale, { weekday: "short" })).slice(0, 1);
				},
				css: customComponents?.customCalendarCss,
				nextLabel: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(NextPrevCalendarButtons, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: "CentralChevronRight",
					width: 10
				}) }),
				prevLabel: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(NextPrevCalendarButtons, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: "CentralChevronLeft",
					width: 10
				}) })
			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Flex.Flex, {
				pt: require_styles_tokens_spacing.Spacing["3xs"],
				pr: require_styles_tokens_spacing.Spacing.sm,
				pb: require_styles_tokens_spacing.Spacing.sm,
				pl: require_styles_tokens_spacing.Spacing.sm,
				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
					kind: "primary",
					typography: { type: "Btn" },
					fullWidth: true,
					text: "Apply",
					onClick: () => {
						updateCalendarState(dates);
					}
				})
			})] }) })
		});
	}
	return null;
}
const FilterContainer = _emotion_styled.default.div`
  display: flex;
  flex-direction: row;
  height: 30px;
  background: ${({ theme }) => theme.bg};
  border-radius: 4px;
  border: 0.5px solid ${({ theme }) => require_styles_themes.getColor(theme, ["controls", "border"])};
`;
const Property = _emotion_styled.default.div`
  border-right: 0.5px solid
    ${({ theme }) => require_styles_themes.getColor(theme, ["controls", "border"])};
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px ${require_styles_tokens_spacing.Spacing.px.xs};
  white-space: nowrap;
`;
const Operator = _emotion_styled.default.div`
  border-right: 0.5px solid
    ${({ theme }) => require_styles_themes.getColor(theme, ["controls", "border"])};
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px ${require_styles_tokens_spacing.Spacing.px.xs};
`;
const Value = _emotion_styled.default.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px ${require_styles_tokens_spacing.Spacing.px.xs};
  white-space: nowrap;
`;
const DeleteButton = _emotion_styled.default.div`
  padding: 0px ${require_styles_tokens_spacing.Spacing.px["2xs"]};
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  &:hover {
    background-color: ${require_styles_colors.colors["black-04"]};
  }
  &:active {
    background-color: ${require_styles_colors.colors["black-10"]};
  }
`;
const NextPrevCalendarButtons = _emotion_styled.default.div`
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  min-width: 28px;
  min-height: 28px;
`;
//#endregion
exports.PillFilter = PillFilter;
