import { z } from "../../styles/z-index.js";
import { Button } from "../Button.js";
import { Spacing } from "../../styles/tokens/spacing.js";
import { Select } from "../Select.js";
import { TextInput } from "../TextInput.js";
import { Filter } from "./Filter.js";
import "./filters.js";
import { DateRangeOperation, MAX_DATE, MIN_DATE, TimeGranularity, endOfDay, startOfDay, subtractTime } from "./date_utils.js";
import { DateWidget } from "./DateWidget.js";
import styled from "@emotion/styled";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/DataManagerTable/DateFilter.tsx
let DatePreset = /* @__PURE__ */ function(DatePreset) {
	DatePreset["LastHour"] = "Last hour";
	DatePreset["Last12Hours"] = "Last 12 hours";
	DatePreset["Today"] = "Today";
	DatePreset["Last7Days"] = "Last 7 days";
	DatePreset["Last14Days"] = "Last 14 days";
	DatePreset["Last30Days"] = "Last 30 days";
	DatePreset["Custom"] = "Custom";
	return DatePreset;
}({});
const SIMPLE_PRESETS = Object.values(DatePreset).filter((preset) => preset !== "Custom");
const isDateFilterState = (state) => state.type === "date";
const getDefaultDateFilterState = () => ({
	type: "date",
	start: null,
	end: null,
	isApplied: false
});
const DateFilter = ({ updateFilterState, state, isDateOnly = false, presets = SIMPLE_PRESETS }) => {
	const [showCustomOptions, setShowCustomOptions] = useState(state.preset === "Custom");
	const [customDateRangeData, setCustomDateRangeData] = useState();
	useEffect(() => {
		setShowCustomOptions(state.preset === "Custom");
	}, [state]);
	const updateStateWithCustomRange = (customDateRangeData) => {
		setCustomDateRangeData(customDateRangeData);
		updateFilterState({
			type: "date",
			preset: "Custom",
			isApplied: true,
			customRangeOperation: customDateRangeData.type,
			...dateRangeOptions[customDateRangeData.type].getRangeData(customDateRangeData)
		});
	};
	const dateRangeOptions = {
		["is in the last"]: {
			type: "is in the last",
			defaultData: {
				type: "is in the last",
				value: 1,
				granularity: "hours"
			},
			getRangeData: (data) => {
				const { value, granularity } = data;
				return {
					start: subtractTime(/* @__PURE__ */ new Date(), value, granularity),
					end: /* @__PURE__ */ new Date()
				};
			},
			components: /* @__PURE__ */ jsxs(TimeAndGranularity, { children: [/* @__PURE__ */ jsx(TextInput, {
				placeholder: "60",
				onChange: (value) => {
					updateStateWithCustomRange({
						type: "is in the last",
						value: parseInt(value) || 0,
						granularity: customDateRangeData?.granularity
					});
				},
				value: `${customDateRangeData?.value}` || ""
			}), /* @__PURE__ */ jsx(Select, {
				defaultValue: {
					value: customDateRangeData?.granularity,
					label: customDateRangeData?.granularity
				},
				options: Object.values(TimeGranularity).map((timeGranularity) => ({
					value: timeGranularity,
					label: timeGranularity
				})),
				onChange: (option) => {
					if (option) updateStateWithCustomRange({
						...customDateRangeData,
						granularity: option.value
					});
				},
				zIndex: z.dropdown
			})] })
		},
		["is equal to"]: {
			type: "is equal to",
			defaultData: {
				type: "is equal to",
				date: /* @__PURE__ */ new Date()
			},
			getRangeData: (data) => {
				const { date } = data;
				return {
					start: startOfDay(date),
					end: endOfDay(date)
				};
			},
			components: /* @__PURE__ */ jsx(DateWidget, {
				dateRangeOperation: "is equal to",
				onChange: updateStateWithCustomRange,
				isDateOnly
			})
		},
		["is between"]: {
			type: "is between",
			defaultData: {
				type: "is between",
				start: subtractTime(/* @__PURE__ */ new Date(), 7, "days"),
				end: /* @__PURE__ */ new Date()
			},
			getRangeData: (data) => {
				const { start, end } = data;
				return {
					start,
					end
				};
			},
			components: /* @__PURE__ */ jsx(DateWidget, {
				dateRangeOperation: "is between",
				onChange: updateStateWithCustomRange,
				isDateOnly
			})
		},
		["is after"]: {
			type: "is after",
			defaultData: {
				type: "is after",
				date: /* @__PURE__ */ new Date()
			},
			getRangeData: (data) => {
				const { date } = data;
				return {
					start: date,
					end: MAX_DATE
				};
			},
			components: /* @__PURE__ */ jsx(DateWidget, {
				dateRangeOperation: "is after",
				onChange: updateStateWithCustomRange,
				isDateOnly
			})
		},
		["is before"]: {
			type: "is before",
			defaultData: {
				type: "is before",
				date: /* @__PURE__ */ new Date()
			},
			getRangeData: (data) => {
				const { date } = data;
				return {
					start: MIN_DATE,
					end: date
				};
			},
			components: /* @__PURE__ */ jsx(DateWidget, {
				dateRangeOperation: "is before",
				onChange: updateStateWithCustomRange,
				isDateOnly
			})
		}
	};
	const handlePreset = (preset) => {
		let start = void 0;
		let end = void 0;
		switch (preset) {
			case "Last hour":
				start = subtractTime(/* @__PURE__ */ new Date(), 1, "hours");
				end = /* @__PURE__ */ new Date();
				break;
			case "Last 12 hours":
				start = subtractTime(/* @__PURE__ */ new Date(), 12, "hours");
				end = /* @__PURE__ */ new Date();
				break;
			case "Today":
				start = startOfDay(/* @__PURE__ */ new Date());
				end = endOfDay(/* @__PURE__ */ new Date());
				break;
			case "Last 7 days":
				start = subtractTime(/* @__PURE__ */ new Date(), 7, "days");
				end = /* @__PURE__ */ new Date();
				break;
			case "Last 14 days":
				start = subtractTime(/* @__PURE__ */ new Date(), 14, "days");
				end = /* @__PURE__ */ new Date();
				break;
			case "Last 30 days":
				start = subtractTime(/* @__PURE__ */ new Date(), 30, "days");
				end = /* @__PURE__ */ new Date();
				break;
			default: break;
		}
		if (start && end) {
			updateFilterState({
				type: "date",
				preset: state.preset === preset ? void 0 : preset,
				start,
				end,
				isApplied: state.preset !== preset
			});
			setShowCustomOptions(false);
		}
	};
	const toggleCustom = () => {
		if (state.preset === "Custom") {
			updateFilterState({
				type: "date",
				preset: void 0,
				start: null,
				end: null,
				isApplied: false
			});
			setShowCustomOptions(false);
			return;
		}
		handleSelectCustomRangeOption("is in the last");
		setShowCustomOptions(true);
	};
	const handleSelectCustomRangeOption = (operation) => {
		updateStateWithCustomRange(dateRangeOptions[operation].defaultData);
	};
	return /* @__PURE__ */ jsx(Filter, {
		label: "date",
		children: /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsxs(ButtonsContainer, { children: [presets.map((preset) => /* @__PURE__ */ jsx(Button, {
			kind: preset === state.preset ? "primary" : void 0,
			text: preset,
			size: "ExtraSmall",
			onClick: () => handlePreset(preset)
		}, preset)), /* @__PURE__ */ jsx(Button, {
			kind: state.preset === "Custom" ? "primary" : void 0,
			text: "Custom",
			size: "ExtraSmall",
			onClick: toggleCustom
		})] }), showCustomOptions && customDateRangeData && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Select, {
			defaultValue: {
				value: customDateRangeData.type,
				label: `${customDateRangeData.type}`
			},
			options: Object.values(DateRangeOperation).map((operation) => ({
				value: operation,
				label: `${operation}`
			})),
			onChange: (option) => {
				if (option) handleSelectCustomRangeOption(option.value);
			},
			zIndex: z.dropdown
		}), dateRangeOptions[customDateRangeData.type].components] })] })
	});
};
const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${Spacing.px.xs};
`;
const ButtonsContainer = styled.div`
  display: flex;
  gap: ${Spacing.px.xs};
  flex-wrap: wrap;
`;
const TimeAndGranularity = styled.div`
  display: flex;
  flex-direction: row;
  gap: ${Spacing.px.xs};
  & > * {
    flex: 1;
  }

  input {
    height: 100%;
  }
`;
//#endregion
export { DateFilter, DatePreset, getDefaultDateFilterState, isDateFilterState };
