<script lang="ts">
	interface Props {
		label: string;
		germanValue: string;
		englishValue: string;
		fieldName: string;
		readonly?: boolean;
		multiline?: boolean;
		onchange?: (value: string) => void;
	}

	let {
		label,
		germanValue,
		englishValue,
		fieldName,
		readonly = false,
		multiline = false,
		onchange
	}: Props = $props();

	function handleInput(event: Event) {
		const target = event.target as HTMLInputElement | HTMLTextAreaElement;
		onchange?.(target.value);
	}
</script>

<style>
.field-comparison {
	margin-bottom: 1rem;
}

.field-label {
	font-weight: 600;
	color: var(--nord4);
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@media(prefers-color-scheme: light) {
    :global(:root:not([data-theme="dark"])) .field-label {
		color: var(--nord2);
	}
  }
:global(:root[data-theme="light"]) .field-label {
	color: var(--nord2);
}

.field-value {
	padding: 0.75rem;
	background: var(--nord0);
	border-radius: 4px;
	color: var(--nord6);
	border: 1px solid var(--nord3);
	min-height: 3rem;
}

@media(prefers-color-scheme: light) {
    :global(:root:not([data-theme="dark"])) .field-value {
		background: var(--nord5);
		color: var(--nord0);
		border-color: var(--nord3);
	}
  }
:global(:root[data-theme="light"]) .field-value {
	background: var(--nord5);
		color: var(--nord0);
		border-color: var(--nord3);
}

.field-value.readonly {
	opacity: 0.8;
}

input.field-value,
textarea.field-value {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	box-sizing: border-box;
	resize: vertical;
}

input.field-value:focus,
textarea.field-value:focus {
	outline: 2px solid var(--nord14);
	border-color: var(--nord14);
}

textarea.field-value {
	min-height: 6rem;
}

.readonly-text {
	white-space: pre-wrap;
	word-wrap: break-word;
}

:global(.readonly-text strong) {
	display: block;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	color: var(--nord8);
}

:global(.readonly-text strong:first-child) {
	margin-top: 0;
}

:global(.readonly-text ul),
:global(.readonly-text ol) {
	margin: 0.5rem 0;
	padding-left: 1.5rem;
}

:global(.readonly-text li) {
	margin: 0.25rem 0;
	color: var(--nord4);
}

@media(prefers-color-scheme: light) {
    :global(:root:not([data-theme="dark"]) .readonly-text strong) {
		color: var(--nord10);
	}

	:global(:root:not([data-theme="dark"]) .readonly-text li) {
		color: var(--nord2);
	}
  }
:global(:root[data-theme="light"]) :global(.readonly-text strong) {
	color: var(--nord10);
}
:global(:root[data-theme="light"]) :global(.readonly-text li) {
	color: var(--nord2);
}
</style>

<div class="field-comparison">
	<div class="field-label">{label}</div>
	{#if readonly}
		<div class="field-value readonly readonly-text">
			{germanValue || '(empty)'}
		</div>
	{:else if multiline}
		<textarea
			class="field-value"
			value={englishValue}
			oninput={handleInput}
			placeholder="Enter {label.toLowerCase()}..."
		></textarea>
	{:else}
		<input
			type="text"
			class="field-value"
			value={englishValue}
			oninput={handleInput}
			placeholder="Enter {label.toLowerCase()}..."
		/>
	{/if}
</div>
