<script setup lang="ts">
import type { IUpdateInformation, InputSize } from '@/Interface';
import ParameterInput from './ParameterInput.vue';
import InputHint from './ParameterInputHint.vue';
import {
	isResourceLocatorValue,
	type IDataObject,
	type INodeProperties,
	type INodePropertyMode,
	type IParameterLabel,
	type NodeParameterValueType,
} from 'n8n-workflow';

import { useResolvedExpression } from '@/app/composables/useResolvedExpression';
import useEnvironmentsStore from '@/features/settings/environments.ee/environments.store';
import { useExternalSecretsStore } from '@/features/integrations/externalSecrets.ee/externalSecrets.ee.store';
import { useNDVStore } from '@/features/ndv/shared/ndv.store';
import { useBinaryDataAccessTooltip } from '@/features/ndv/shared/composables/useBinaryDataAccessTooltip';
import { isValueExpression, parseResourceMapperFieldName } from '@/app/utils/nodeTypesUtils';
import type { EventBus } from '@n8n/utils/event-bus';
import { createEventBus } from '@n8n/utils/event-bus';
import { computed, useTemplateRef } from 'vue';

import { N8nTooltip } from '@n8n/design-system';
type Props = {
	parameter: INodeProperties;
	path: string;
	modelValue: NodeParameterValueType;
	additionalExpressionData?: IDataObject;
	rows?: number;
	isReadOnly?: boolean;
	isAssignment?: boolean;
	droppable?: boolean;
	activeDrop?: boolean;
	forceShowExpression?: boolean;
	hint?: string;
	hideHint?: boolean;
	inputSize?: InputSize;
	hideIssues?: boolean;
	documentationUrl?: string;
	errorHighlight?: boolean;
	isForCredential?: boolean;
	eventSource?: string;
	label?: IParameterLabel;
	eventBus?: EventBus;
	canBeOverridden?: boolean;
	hideLabel?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
	additionalExpressionData: () => ({}),
	rows: 5,
	label: () => ({ size: 'small' }),
	eventBus: () => createEventBus(),
});

const emit = defineEmits<{
	focus: [];
	blur: [];
	drop: [value: string];
	update: [value: IUpdateInformation];
	textInput: [value: IUpdateInformation];
}>();

const ndvStore = useNDVStore();
const externalSecretsStore = useExternalSecretsStore();
const environmentsStore = useEnvironmentsStore();
const { binaryDataAccessTooltip } = useBinaryDataAccessTooltip();

const isExpression = computed(() => {
	return isValueExpression(props.parameter, props.modelValue);
});

const selectedRLMode = computed(() => {
	if (
		typeof props.modelValue !== 'object' ||
		props.parameter.type !== 'resourceLocator' ||
		!isResourceLocatorValue(props.modelValue)
	) {
		return undefined;
	}

	const mode = props.modelValue.mode;
	if (mode) {
		return props.parameter.modes?.find((m: INodePropertyMode) => m.name === mode);
	}

	return undefined;
});

const parameterHint = computed(() => {
	if (isExpression.value) {
		return undefined;
	}
	if (selectedRLMode.value?.hint) {
		return selectedRLMode.value.hint;
	}

	return props.hint;
});

const targetItem = computed(() => ndvStore.expressionTargetItem);

const isInputParentOfActiveNode = computed(() => ndvStore.isInputParentOfActiveNode);

const expression = computed(() => {
	if (!isExpression.value) return '';
	return isResourceLocatorValue(props.modelValue) ? props.modelValue.value : props.modelValue;
});

const resolvedAdditionalExpressionData = computed(() => {
	return {
		$vars: environmentsStore.variablesAsObject,
		...(externalSecretsStore.isEnterpriseExternalSecretsEnabled && props.isForCredential
			? { $secrets: externalSecretsStore.secretsAsObject }
			: {}),
		...props.additionalExpressionData,
	};
});

const { resolvedExpression, resolvedExpressionString } = useResolvedExpression({
	expression,
	additionalData: resolvedAdditionalExpressionData,
	isForCredential: props.isForCredential,
	stringifyObject: props.parameter.type !== 'multiOptions',
});

const parsedParameterName = computed(() => {
	return parseResourceMapperFieldName(props.parameter?.name ?? '');
});

const expectsBinaryData = computed(() => {
	return (
		props.parameter.name.includes('binaryPropertyName') ||
		props.parameter.typeOptions?.binaryDataProperty
	);
});

function onFocus() {
	emit('focus');
}

function onBlur() {
	emit('blur');
}

function onDrop(data: string) {
	emit('drop', data);
}

function onValueChanged(parameterData: IUpdateInformation) {
	emit('update', parameterData);
}

function onTextInput(parameterData: IUpdateInformation) {
	emit('textInput', parameterData);
}

const param = useTemplateRef('param');
const isSingleLineInput = computed(() => param.value?.isSingleLineInput);
const displaysIssues = computed(() => param.value?.displaysIssues);
defineExpose({
	isSingleLineInput,
	displaysIssues,
	focusInput: () => param.value?.focusInput(),
	selectInput: () => param.value?.selectInput(),
});
</script>

<template>
	<div :class="$style.parameterInput" data-test-id="parameter-input">
		<N8nTooltip placement="left" :disabled="!expectsBinaryData">
			<template #content>
				{{ binaryDataAccessTooltip }}
			</template>
			<ParameterInput
				ref="param"
				:input-size="inputSize"
				:parameter="parameter"
				:model-value="modelValue"
				:path="path"
				:is-read-only="isReadOnly"
				:is-assignment="isAssignment"
				:droppable="droppable"
				:active-drop="activeDrop"
				:force-show-expression="forceShowExpression"
				:hide-issues="hideIssues"
				:documentation-url="documentationUrl"
				:error-highlight="errorHighlight"
				:is-for-credential="isForCredential"
				:hide-label="hideLabel"
				:event-source="eventSource"
				:expression-evaluated="resolvedExpression"
				:additional-expression-data="resolvedAdditionalExpressionData"
				:label="label"
				:rows="rows"
				:data-test-id="`parameter-input-${parsedParameterName}`"
				:event-bus="eventBus"
				:can-be-overridden="canBeOverridden"
				@focus="onFocus"
				@blur="onBlur"
				@drop="onDrop"
				@text-input="onTextInput"
				@update="onValueChanged"
			>
				<template #overrideButton>
					<slot v-if="$slots.overrideButton" name="overrideButton" />
				</template>
			</ParameterInput>
		</N8nTooltip>
		<div v-if="!hideHint && (resolvedExpressionString || parameterHint)" :class="$style.hint">
			<div>
				<InputHint
					v-if="resolvedExpressionString"
					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
					:data-test-id="`parameter-expression-preview-${parsedParameterName}`"
					:highlight="!!(resolvedExpressionString && targetItem) && isInputParentOfActiveNode"
					:hint="resolvedExpressionString"
					:single-line="true"
				/>
				<InputHint v-else-if="parameterHint" :render-h-t-m-l="true" :hint="parameterHint" />
			</div>
			<slot v-if="$slots.options" name="options" />
		</div>
	</div>
</template>

<style lang="scss" module>
.parameterInput {
	display: flex;
	flex-direction: column;
	gap: var(--spacing--4xs);
}

.hovering {
	color: var(--color--secondary);
}
</style>
