<script setup lang="ts">
import { useCredentialsStore } from '../credentials.store';
import { useNodeTypesStore } from '@/app/stores/nodeTypes.store';
import { useRootStore } from '@n8n/stores/useRootStore';
import { useUIStore } from '@/app/stores/ui.store';
import { getThemedValue } from '@/app/utils/nodeTypesUtils';
import { getNodeIconSource } from '@/app/utils/nodeIcon';
import type { ICredentialType } from 'n8n-workflow';
import { computed } from 'vue';
import { N8nNodeIcon } from '@n8n/design-system';
import type { AppliedThemeOption } from '@/Interface';

const props = defineProps<{
	credentialTypeName: string | null;
	size?: number;
	theme?: AppliedThemeOption;
}>();

const credentialsStore = useCredentialsStore();
const rootStore = useRootStore();
const uiStore = useUIStore();
const nodeTypesStore = useNodeTypesStore();

const credentialWithIcon = computed(() => getCredentialWithIcon(props.credentialTypeName));

const theme = computed(() => props.theme ?? uiStore.appliedTheme);

// Route through getNodeIconSource so named icons (e.g. HTTP Request's `node:http-request`)
// resolve correctly — reading `iconUrl` alone misses them and falls back to the `?` placeholder.
const referencedNodeIconSource = computed(() => {
	const icon = getThemedValue(credentialWithIcon.value?.icon, theme.value);
	if (!icon?.startsWith('node:')) return undefined;
	const nodeType = nodeTypesStore.getNodeType(icon.replace('node:', ''));
	if (!nodeType) return undefined;
	return getNodeIconSource(nodeType, null, null);
});

const iconSource = computed(() => {
	if (referencedNodeIconSource.value?.type === 'file') {
		return referencedNodeIconSource.value.src;
	}

	const themeIconUrl = getThemedValue(credentialWithIcon.value?.iconUrl, theme.value);
	if (!themeIconUrl) return undefined;

	return rootStore.baseUrl + themeIconUrl;
});

const iconType = computed(() => {
	if (iconSource.value) return 'file';
	else if (iconName.value) return 'icon';
	return 'unknown';
});

const iconName = computed(() => {
	if (referencedNodeIconSource.value?.type === 'icon') {
		return referencedNodeIconSource.value.name;
	}

	const icon = getThemedValue(credentialWithIcon.value?.icon, theme.value);
	if (!icon?.startsWith('fa:')) return undefined;
	return icon.replace('fa:', '');
});

const iconColor = computed(() => {
	if (referencedNodeIconSource.value?.type === 'icon' && referencedNodeIconSource.value.color) {
		return referencedNodeIconSource.value.color;
	}

	const { iconColor: color } = credentialWithIcon.value ?? {};
	if (!color) return undefined;
	return `var(--node--icon--color--${color})`;
});

function getCredentialWithIcon(name: string | null): ICredentialType | null {
	if (!name) {
		return null;
	}

	const type = credentialsStore.getCredentialTypeByName(name);

	if (!type) {
		return null;
	}

	if (type.icon ?? type.iconUrl) {
		return type;
	}

	if (type.extends) {
		let parentCred = null;
		type.extends.forEach((credType) => {
			parentCred = getCredentialWithIcon(credType);
			if (parentCred !== null) return;
		});
		return parentCred;
	}

	return null;
}
</script>

<template>
	<N8nNodeIcon
		:class="$style.icon"
		:type="iconType"
		:size="size ?? 26"
		:src="iconSource"
		:name="iconName"
		:color="iconColor"
	/>
</template>

<style lang="scss" module>
.icon {
	--node--icon--color: var(--color--foreground--shade-1);
}
</style>
