import { t } from '@/i18n'
import type { ImageVariant, VariantFormat } from '@/composables/useImageVariants'
import { formatType } from '@/lib/mediaFormat'
import { formatDimensions, formatLabel } from '@/lib/variants/variantFormat'

const SEPARATOR = ' · '
const VECTOR = 'Vector'
const SVG_TYPE = 'image/svg+xml'
const ORIGINAL_VALUE = ''

export interface VariantOption {
	value: string
	label: string
}

export interface OptionSource {
	url: string
	width: number | null
	height: number | null
	content_type: string
}

export const ORIGINAL_OPTION_VALUE = ORIGINAL_VALUE

export function isVector(source: OptionSource) {
	return source.content_type === SVG_TYPE
}

function sourceSize(source: OptionSource) {
	if (source.width === null || source.height === null) {
		return t(VECTOR)
	}
	return `${source.width}×${source.height}`
}

export function capitalised(name: string) {
	return name.charAt(0).toUpperCase() + name.slice(1)
}

export function originalOption(source: OptionSource): VariantOption {
	return {
		value: ORIGINAL_VALUE,
		label: [t('Original'), sourceSize(source), formatType(source.content_type)].join(SEPARATOR),
	}
}

export function bareOriginalOption(): VariantOption {
	return { value: ORIGINAL_VALUE, label: t('Original') }
}

export function variantOption(variant: ImageVariant): VariantOption {
	return {
		value: variant.name,
		label: [
			capitalised(variant.name),
			formatDimensions(variant.width, variant.height),
			formatLabel(variant.format as VariantFormat),
		].join(SEPARATOR),
	}
}

export function buildOptions(source: OptionSource, variants: ImageVariant[]): VariantOption[] {
	const offered = isVector(source) ? [] : variants.map(variantOption)
	return [originalOption(source), ...offered]
}

export function insertedUrl(source: OptionSource, variantName: string) {
	return variantName === ORIGINAL_VALUE
		? source.url
		: `${source.url}?v=${encodeURIComponent(variantName)}`
}