/** @license MIT | @cube-dev/ui-kit v0.127.0 | Cube Dev Team */
import { tasty } from "@tenphi/tasty";
import { useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useDateSegment } from "react-aria";

//#region src/components/fields/DatePicker/DatePickerSegment.tsx
const LiteralSegmentElement = tasty({
	qa: "LiteralSegment",
	as: "span",
	"aria-hidden": "true",
	styles: {}
});
const EditableSegmentElement = tasty({
	qa: "EditableSegment",
	styles: {
		padding: "0 1bw",
		fontVariantNumeric: "tabular-nums lining-nums",
		textAlign: "right",
		font: "monospace",
		border: 0,
		outline: 0,
		color: {
			"": "inherit",
			":focus": "#white"
		},
		fill: {
			"": "#clear",
			":focus": "#primary"
		},
		radius: ".25x",
		Placeholder: { opacity: "var(--disabled-opacity)" }
	}
});
function DatePickerSegment({ segment, state, ...otherProps }) {
	switch (segment.type) {
		case "literal": return /* @__PURE__ */ jsx(LiteralSegment, { segment });
		default: return /* @__PURE__ */ jsx(EditableSegment, {
			segment,
			state,
			...otherProps
		});
	}
}
function LiteralSegment({ segment }) {
	return /* @__PURE__ */ jsx(LiteralSegmentElement, {
		"data-type": segment.type === "literal" ? void 0 : segment.type,
		children: segment.text
	});
}
function EditableSegment({ segment, state }) {
	let ref = useRef(null);
	let { segmentProps } = useDateSegment(segment, state, ref);
	return /* @__PURE__ */ jsx(EditableSegmentElement, {
		...segmentProps,
		ref,
		mods: {
			placeholder: segment.isPlaceholder,
			"read-only": !segment.isEditable
		},
		style: {
			...segmentProps.style,
			minWidth: segment.maxValue != null ? `calc(${String(segment.maxValue).length + "ch"})` : void 0
		},
		"data-testid": segment.type,
		children: segment.isPlaceholder ? /* @__PURE__ */ jsx("span", {
			"data-element": "Placeholder",
			"aria-hidden": "true",
			children: segment.placeholder
		}) : segment.text
	});
}

//#endregion
export { DatePickerSegment };
//# sourceMappingURL=DatePickerSegment.js.map