<script lang="ts">
	import { CwAlertPointsEditor } from '@cropwatchdevelopment/cwui';
	import type { CwAlertPointsValue } from '@cropwatchdevelopment/cwui';

	let alertPoints = $state<CwAlertPointsValue>({
		unit: 'C',
		center: '0',
		points: []
	});
</script>

<CwAlertPointsEditor bind:value={alertPoints} />

<script lang="ts">
	import { CwAlertPointsEditor } from '@cropwatchdevelopment/cwui';
	import type {
		CwAlertPointsEditorText,
		CwAlertPointsValue
	} from '@cropwatchdevelopment/cwui';
	import { t } from '$lib/i18n';

	let alertPoints = $state<CwAlertPointsValue>({
		unit: 'C',
		center: '0',
		points: [
			{
				id: 'alert-1',
				name: t('alerts.points.coldEdge'),
				color: '#f7903b',
				condition: 'lessThanOrEqual',
				value: '-2',
				min: '',
				max: ''
			}
		]
	});

	const alertPointsText: CwAlertPointsEditorText = {
		unitFieldLabel: t('alerts.labels.unit'),
		centerFieldLabel: t('alerts.labels.center'),
		nameFieldLabel: t('alerts.labels.name'),
		conditionFieldLabel: t('alerts.labels.condition'),
		valueFieldLabel: t('alerts.labels.value'),
		minValueFieldLabel: t('alerts.labels.min'),
		maxValueFieldLabel: t('alerts.labels.max'),
		colorFieldLabel: t('alerts.labels.color'),
		addAlertPointButton: t('alerts.actions.add'),
		removePointButton: t('alerts.actions.remove'),
		emptyTitle: t('alerts.empty.title'),
		emptyDescription: t('alerts.empty.description'),
		fieldLabelWithUnit: (label, unit) =>
			t('alerts.format.fieldWithUnit', { label, unit }),
		requiredFieldError: (label) =>
			t('alerts.validation.required', { label }),
		invalidPreviewNote: (count) =>
			t('alerts.preview.invalidCount', { count }),
		overlapPreviewNote: (count) =>
			t('alerts.preview.overlapCount', { count }),
		pointDescriptionEquals: (value, unit) =>
			t('alerts.preview.equals', { value, unit }),
		pointDescriptionRange: (min, max, unit) =>
			t('alerts.preview.range', { min, max, unit }),
		overlapError: (labels) =>
			t('alerts.validation.overlap', { labels: labels.join(', ') })
	};
</script>

<CwAlertPointsEditor bind:value={alertPoints} text={alertPointsText} />

<script lang="ts">
	let alertPoints = $state({
		unit: 'C',
		center: '0',
		points: [
			{
				id: 'alert-1',
				name: 'Cold edge',
				color: '#f7903b',
				condition: 'lessThanOrEqual',
				value: '-2',
				min: '',
				max: ''
			}
		]
	});

	function toNumber(raw: string) {
		const trimmed = raw.trim();
		if (!trimmed) return null;
		const parsed = Number(trimmed);
		return Number.isFinite(parsed) ? parsed : null;
	}

	const normalized = $derived({
		center: toNumber(alertPoints.center) ?? 0,
		points: alertPoints.points.map((point) =>
			point.condition === 'range'
				? { ...point, min: toNumber(point.min), max: toNumber(point.max) }
				: { ...point, value: toNumber(point.value) }
		)
	});
</script>