import { ButtonRow } from "../ButtonRow.js";
import { Filter } from "./Filter.js";
import "./filters.js";
import { NumberInput } from "../NumberInput.js";
import styled from "@emotion/styled";
import { useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
import { CurrencyUnit } from "@lightsparkdev/core";
//#region src/components/DataManagerTable/CurrencyFilter.tsx
const isCurrencyFilterState = (state) => state.type === "currency";
const getDefaultCurrencyFilterState = () => ({
	type: "currency",
	min_amount: null,
	max_amount: null,
	isApplied: false
});
const CurrencyFilter = ({ updateFilterState, state, label }) => {
	const [filterRangeType, setFilterRangeType] = useState("Less than");
	const isMinDisplayed = filterRangeType !== "Less than";
	const isMaxDisplayed = filterRangeType !== "More than";
	const handleMinChange = (value) => {
		updateFilterState({
			...state,
			min_amount: value ? {
				value: parseInt(value),
				unit: CurrencyUnit.SATOSHI
			} : null,
			isApplied: state.max_amount !== null || !!value
		});
	};
	const handleMaxChange = (value) => {
		updateFilterState({
			...state,
			max_amount: value ? {
				value: parseInt(value),
				unit: CurrencyUnit.SATOSHI
			} : null,
			isApplied: state.min_amount !== null || !!value
		});
	};
	const handleClick = (type) => {
		setFilterRangeType(type);
		updateFilterState({
			...state,
			min_amount: null,
			max_amount: null,
			isApplied: false
		});
	};
	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Filter, {
		label,
		children: [/* @__PURE__ */ jsx(NumberButtonRowContainer, {
			smSticky: false,
			bottomBorder: false,
			buttons: [
				{
					text: "Less than",
					kind: filterRangeType === "Less than" ? "primary" : void 0,
					onClick: () => handleClick("Less than"),
					size: "ExtraSmall"
				},
				{
					text: "Between",
					kind: filterRangeType === "Between" ? "primary" : void 0,
					onClick: () => handleClick("Between"),
					size: "ExtraSmall"
				},
				{
					text: "More than",
					kind: filterRangeType === "More than" ? "primary" : void 0,
					onClick: () => handleClick("More than"),
					size: "ExtraSmall"
				}
			]
		}), /* @__PURE__ */ jsxs(InputContainer, { children: [
			isMinDisplayed && /* @__PURE__ */ jsx(NumberInput, {
				placeholder: "0",
				onChange: handleMinChange,
				value: state.min_amount?.value?.toString() || "",
				icon: {
					name: "Satoshi",
					side: "left",
					width: 8
				},
				typography: { color: "black" },
				allowNegativeValue: true
			}),
			isMinDisplayed && isMaxDisplayed && /* @__PURE__ */ jsx(Divider, {}),
			isMaxDisplayed && /* @__PURE__ */ jsx(NumberInput, {
				placeholder: "0",
				onChange: handleMaxChange,
				value: state.max_amount?.value?.toString() || "",
				icon: {
					name: "Satoshi",
					side: "left",
					width: 8
				},
				typography: { color: "black" },
				allowNegativeValue: true
			})
		] })]
	}) });
};
const NumberButtonRowContainer = styled(ButtonRow)`
  padding: 0px !important;
`;
const InputContainer = styled.div`
  display: flex;
  flex-direction: row;
  margin-top: 24px;
  gap: 10px;
  align-items: center;
`;
const Divider = styled.div`
  height: 4px;
  width: 12px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: ${({ theme }) => theme.c1Neutral};
`;
//#endregion
export { CurrencyFilter, getDefaultCurrencyFilterState, isCurrencyFilterState };
