import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, unref, vModelText, watch, withDirectives } from "vue";
import { ScalarIcon } from "@scalar/components";
//#region src/views/Environment/EnvironmentColors.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["onClick"];
var _hoisted_2 = ["placeholder"];
var EnvironmentColors_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "EnvironmentColors",
	props: {
		activeColor: {},
		selector: {
			type: Boolean,
			default: false
		}
	},
	emits: ["select"],
	setup(__props, { emit: __emit }) {
		const props = __props;
		const emit = __emit;
		const customColor = ref("");
		const customColorInputRef = ref(null);
		const showCustomInput = ref(false);
		const showSelector = ref(false);
		const colorOptions = [
			{ color: "#FFFFFF" },
			{ color: "#EF0006" },
			{ color: "#EDBE20" },
			{ color: "#069061" },
			{ color: "#FB892C" },
			{ color: "#0082D0" },
			{ color: "#5203D1" },
			{ color: "#FFC0CB" }
		];
		const backgroundStyle = computed(() => {
			return props.activeColor && !colorOptions.some((option) => option.color === props.activeColor) || customColor.value ? `background-color: ${props.activeColor || customColor.value};` : "background: linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));";
		});
		const handleClick = () => {
			showCustomInput.value = !showCustomInput.value;
			if (props.selector) showSelector.value = false;
			nextTick(() => {
				if (customColorInputRef.value) customColorInputRef.value.focus();
			});
		};
		watch(customColor, (newColor) => {
			if (newColor && !newColor.startsWith("#")) customColor.value = `#${newColor}`;
			showCustomInput.value = true;
		});
		const handleSelectorClick = () => {
			if (props.selector) showSelector.value = !showSelector.value;
		};
		const selectColor = (color) => {
			emit("select", color);
			if (props.selector) showSelector.value = false;
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", null, [!showCustomInput.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [props.selector && !showSelector.value ? (openBlock(), createElementBlock("div", {
				key: 0,
				class: normalizeClass(["flex cursor-pointer items-center justify-center rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
				style: normalizeStyle({ backgroundColor: __props.activeColor }),
				onClick: handleSelectorClick
			}, [__props.activeColor ? (openBlock(), createBlock(unref(ScalarIcon), {
				key: 0,
				class: normalizeClass(["text-c-btn", props.selector && "p-0.5"]),
				icon: "Checkmark",
				size: "xs"
			}, null, 8, ["class"])) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), showSelector.value || !props.selector ? (openBlock(), createElementBlock("div", {
				key: 1,
				class: normalizeClass(["color-selector flex flex-row items-center justify-between gap-1.5 space-x-1", props.selector ? "h-4" : "min-h-10 min-w-[296px]"])
			}, [
				(openBlock(), createElementBlock(Fragment, null, renderList(colorOptions, (option) => {
					return createElementVNode("div", {
						key: option.color,
						class: normalizeClass(["flex cursor-pointer items-center justify-center rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
						style: normalizeStyle({ backgroundColor: option.color }),
						onClick: ($event) => selectColor(option.color)
					}, [__props.activeColor === option.color && !customColor.value ? (openBlock(), createBlock(unref(ScalarIcon), {
						key: 0,
						class: normalizeClass(["text-c-btn", props.selector && "p-0.5"]),
						icon: "Checkmark",
						size: "xs"
					}, null, 8, ["class"])) : createCommentVNode("", true)], 14, _hoisted_1);
				}), 64)),
				_cache[2] || (_cache[2] = createElementVNode("hr", { class: "border-ghost h-5 w-0.5 border-l" }, null, -1)),
				createElementVNode("label", {
					class: normalizeClass(["z-10 flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
					style: normalizeStyle(backgroundStyle.value),
					onClick: handleClick
				}, [!showCustomInput.value && (__props.activeColor === customColor.value || __props.activeColor && !colorOptions.some((option) => option.color === __props.activeColor)) ? (openBlock(), createBlock(unref(ScalarIcon), {
					key: 0,
					class: "text-c-btn",
					icon: "Checkmark",
					size: "xs"
				})) : createCommentVNode("", true)], 6)
			], 2)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), showCustomInput.value ? (openBlock(), createElementBlock("div", {
				key: 1,
				class: normalizeClass(["color-selector flex flex-1 items-center gap-2 rounded", props.selector ? "h-4" : "min-h-10"])
			}, [
				createElementVNode("span", { class: normalizeClass(["absolute rounded-full border border-dashed", props.selector ? "h-4 w-4" : "h-5 w-5"]) }, null, 2),
				createElementVNode("span", {
					class: normalizeClass(["z-[1] rounded-full", props.selector ? "h-4 w-4" : "h-5 w-5"]),
					style: normalizeStyle(backgroundStyle.value)
				}, null, 6),
				withDirectives(createElementVNode("input", {
					ref_key: "customColorInputRef",
					ref: customColorInputRef,
					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customColor.value = $event),
					class: "w-full flex-1 border-transparent text-sm outline-none",
					placeholder: __props.activeColor || "#000000",
					type: "text",
					onInput: _cache[1] || (_cache[1] = ($event) => selectColor(customColor.value))
				}, null, 40, _hoisted_2), [[vModelText, customColor.value]]),
				createElementVNode("button", {
					class: "text-c-3 hover:bg-b-2 rounded-lg p-1.5",
					type: "button",
					onClick: handleClick
				}, [createVNode(unref(ScalarIcon), {
					icon: "Checkmark",
					size: "xs"
				})])
			], 2)) : createCommentVNode("", true)]);
		};
	}
});
//#endregion
export { EnvironmentColors_vue_vue_type_script_setup_true_lang_default as default };

//# sourceMappingURL=EnvironmentColors.vue.script.js.map