import { useLayout } from "../../hooks/useLayout.js";
import { useWorkspace } from "../../store/store.js";
import HttpMethod_default from "../HttpMethod/HttpMethod.vue.js";
import CodeInput_default from "../CodeInput/CodeInput.vue.js";
import ServerDropdown_default from "../Server/ServerDropdown.vue.js";
import AddressBarHistory_default from "./AddressBarHistory.vue.js";
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, openBlock, ref, toDisplayString, unref, useId, watch, withCtx } from "vue";
import { ScalarButton } from "@scalar/components";
import { REQUEST_METHODS } from "@scalar/helpers/http/http-info";
import { ScalarIconPlay } from "@scalar/icons";
//#region src/components/AddressBar/AddressBar.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["id"];
var _hoisted_2 = { class: "address-bar-bg-states text-xxs group relative order-last flex w-full max-w-[calc(100dvw-24px)] flex-1 flex-row items-stretch rounded-lg p-0.75 lg:order-none lg:max-w-[580px] lg:min-w-[580px] xl:max-w-[720px] xl:min-w-[720px]" };
var _hoisted_3 = { class: "pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border" };
var _hoisted_4 = { class: "z-context-plus flex gap-1" };
var _hoisted_5 = { class: "scroll-timeline-x scroll-timeline-x-hidden z-context-plus relative flex w-full bg-blend-normal" };
var _hoisted_6 = {
	"aria-hidden": "true",
	class: "inline-flex items-center gap-1"
};
var _hoisted_7 = { class: "sr-only" };
var AddressBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "AddressBar",
	props: {
		collection: {},
		operation: {},
		server: {},
		environment: {},
		envVariables: {},
		workspace: {}
	},
	emits: ["importCurl"],
	setup(__props) {
		const id = useId();
		const { requestMutators, events } = useWorkspace();
		const { layout } = useLayout();
		const addressBarRef = ref(null);
		const sendButtonRef = ref(null);
		/** update the instance path parameters on change */
		const onUrlChange = (newPath) => {
			if (__props.operation.path === newPath) return;
			requestMutators.edit(__props.operation.uid, "path", newPath);
		};
		/** watch for changes in the URL */
		watch(() => __props.operation.path, (newURL) => {
			if (!newURL) return;
			onUrlChange(newURL);
		});
		/** The amount remaining to load from 100 -> 0 */
		const percentage = ref(100);
		/** Keeps track of how much was left when the request finished */
		const remaining = ref(0);
		/** Whether or not there is a request loading */
		const isRequesting = ref(false);
		/** The loading interval */
		const interval = ref();
		function load() {
			if (isRequesting.value) percentage.value -= (percentage.value - 15) / 60;
			else percentage.value -= remaining.value / 20;
			if (percentage.value <= 0) {
				clearInterval(interval.value);
				interval.value = void 0;
				percentage.value = 100;
				isRequesting.value = false;
			}
		}
		function startLoading() {
			if (interval.value) return;
			isRequesting.value = true;
			interval.value = setInterval(load, 20);
		}
		function stopLoading() {
			remaining.value = percentage.value;
			isRequesting.value = false;
		}
		function abortLoading() {
			clearInterval(interval.value);
			interval.value = void 0;
			percentage.value = 100;
			isRequesting.value = false;
		}
		events.requestStatus.on((status) => {
			if (status === "start") return startLoading();
			if (status === "stop") return stopLoading();
			if (status === "abort") return abortLoading();
		});
		/** Focus the address bar (or the send button if in modal layout) */
		events.focusAddressBar.on(() => {
			if (layout === "modal") sendButtonRef.value?.$el?.focus();
			else addressBarRef.value?.focus();
		});
		function updateRequestMethod(method) {
			requestMutators.edit(__props.operation.uid, "method", method);
		}
		function getBackgroundColor() {
			const { method } = __props.operation;
			return REQUEST_METHODS[method].colorVar;
		}
		function handleExecuteRequest() {
			if (isRequesting.value) return;
			isRequesting.value = true;
			events.executeRequest.emit({ requestUid: __props.operation.uid });
		}
		/** Handle hotkeys */
		events.hotKeys.on((event) => {
			if (event?.focusAddressBar) addressBarRef.value?.focus();
			if (event?.executeRequest) handleExecuteRequest();
		});
		/**
		* TODO: Should we handle query params here somehow?
		*/
		function updateRequestPath(url) {
			requestMutators.edit(__props.operation.uid, "path", url);
		}
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				id: unref(id),
				class: "scalar-address-bar order-last flex h-(--scalar-address-bar-height) w-full [--scalar-address-bar-height:32px] lg:order-none lg:w-auto"
			}, [createElementVNode("div", _hoisted_2, [
				createElementVNode("div", _hoisted_3, [createElementVNode("div", {
					class: "absolute top-0 left-0 z-[1002] h-full w-full",
					style: normalizeStyle({
						backgroundColor: `color-mix(in srgb, transparent 90%, ${getBackgroundColor()})`,
						transform: `translate3d(-${percentage.value}%,0,0)`
					})
				}, null, 4)]),
				createElementVNode("div", _hoisted_4, [createVNode(HttpMethod_default, {
					isEditable: unref(layout) !== "modal",
					isSquare: "",
					method: __props.operation.method,
					teleport: "",
					onChange: updateRequestMethod
				}, null, 8, ["isEditable", "method"])]),
				createElementVNode("div", _hoisted_5, [
					__props.collection.servers.length ? (openBlock(), createBlock(unref(ServerDropdown_default), {
						key: 0,
						collection: __props.collection,
						layout: "client",
						operation: __props.operation,
						server: __props.server,
						target: unref(id)
					}, null, 8, [
						"collection",
						"operation",
						"server",
						"target"
					])) : createCommentVNode("", true),
					_cache[1] || (_cache[1] = createElementVNode("div", { class: "fade-left" }, null, -1)),
					createVNode(CodeInput_default, {
						ref_key: "addressBarRef",
						ref: addressBarRef,
						"aria-label": "Path",
						class: "min-w-fit outline-none",
						disableCloseBrackets: "",
						disabled: unref(layout) === "modal",
						disableEnter: "",
						disableTabIndent: "",
						emitOnBlur: false,
						envVariables: __props.envVariables,
						environment: __props.environment,
						importCurl: "",
						modelValue: __props.operation.path,
						placeholder: __props.server?.uid && __props.collection.servers.includes(__props.server.uid) ? "" : "Enter a URL or cURL command",
						server: "",
						workspace: __props.workspace,
						onCurl: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("importCurl", $event)),
						onSubmit: handleExecuteRequest,
						"onUpdate:modelValue": updateRequestPath
					}, null, 8, [
						"disabled",
						"envVariables",
						"environment",
						"modelValue",
						"placeholder",
						"workspace"
					]),
					_cache[2] || (_cache[2] = createElementVNode("div", { class: "fade-right" }, null, -1))
				]),
				createVNode(AddressBarHistory_default, {
					operation: __props.operation,
					target: unref(id)
				}, null, 8, ["operation", "target"]),
				createVNode(unref(ScalarButton), {
					ref_key: "sendButtonRef",
					ref: sendButtonRef,
					class: "z-context-plus relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold",
					disabled: isRequesting.value,
					onClick: handleExecuteRequest
				}, {
					default: withCtx(() => [createElementVNode("span", _hoisted_6, [createVNode(unref(ScalarIconPlay), {
						class: "relative shrink-0",
						size: "xs",
						weight: "fill"
					}), _cache[3] || (_cache[3] = createElementVNode("span", { class: "text-xxs hidden lg:flex" }, "Send", -1))]), createElementVNode("span", _hoisted_7, " Send " + toDisplayString(__props.operation.method) + " request to " + toDisplayString(__props.server?.url ?? "") + toDisplayString(__props.operation.path), 1)]),
					_: 1
				}, 8, ["disabled"])
			])], 8, _hoisted_1);
		};
	}
});
//#endregion
export { AddressBar_vue_vue_type_script_setup_true_lang_default as default };

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