@use 'sass:math';
@use '@lucca-front/scss/src/commons/utils/form';
@use '@lucca-front/scss/src/commons/utils/media';
@use '@lucca-front/scss/src/commons/utils/loading';
@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
@use '@lucca-front/scss/src/components/textField/exports' as textField;
@use '@lucca-front/scss/src/components/switchField/exports' as switchField;
@use '@lucca-front/scss/src/components/checkboxField/exports' as checkboxField;
@use '@lucca-front/scss/src/components/radioField/exports' as radioField;
@use '@lucca-front/scss/src/components/simpleSelect/exports' as simpleSelect;
@use '@lucca-front/scss/src/components/multiSelect/exports' as multiSelect;
@use '@lucca-front/scss/src/components/timepicker/exports' as timepicker;
@use '@lucca-front/scss/src/components/box/exports' as box;
@use '@lucca-front/scss/src/components/color/exports' as color;

@mixin maxWidth {
	max-inline-size: var(--components-form-maxWidth);
}

@mixin inline {
	.form-field {
		display: inline-grid;

		&:not(:last-of-type) {
			margin-inline-end: var(--pr-t-spacings-200);
		}
	}
}

@mixin selectOption {
	padding: var(--pr-t-spacings-50) var(--pr-t-spacings-100);
	position: relative;
	border-radius: var(--pr-t-border-radius-default);

	.formLabel {
		@include formLabel.widthAuto;

		position: static;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
		}
	}

	&:not(:has(.checkboxField-input:disabled, .checkboxField-input.is-disabled)) {
		&:hover {
			background-color: var(--palettes-neutral-50);
		}

		&:has(
			.checkboxField-input:checked,
			.checkboxField-input.is-checked,
			.checkboxField-input[aria-checked='mixed'],
			.checkboxField-input.is-mixed
		) {
			background-color: var(--palettes-product-50);

			&:hover {
				background-color: var(--palettes-product-100);
			}
		}

		&:has(.checkboxField-input[aria-invalid='true'], .checkboxField-input.is-invalid) {
			&:hover {
				background-color: var(--palettes-error-50);
			}

			&:has(
				.checkboxField-input:checked,
				.checkboxField-input.is-checked,
				.checkboxField-input[aria-checked='mixed'],
				.checkboxField-input.is-mixed
			) {
				background-color: var(--palettes-error-50);

				&:hover {
					background-color: var(--palettes-error-100);
				}
			}
		}
	}
}

@mixin S {
	.formLabel {
		@include formLabel.S;
	}

	.textField {
		@include textField.S;
	}

	.radioField {
		@include radioField.S;
	}

	.checkboxField {
		@include checkboxField.S;
	}

	.switchField {
		@include switchField.S;
	}

	.simpleSelect {
		@include simpleSelect.S;
	}

	.multiSelect {
		@include multiSelect.S;
	}

	.timePicker {
		@include timepicker.S;
	}

	.color {
		@include color.M;
	}
}

@mixin XS {
	.formLabel {
		@include formLabel.XS;
	}

	.textField {
		@include textField.XS;
	}

	.inlineMessage {
		@include inlineMessage.S;
	}

	.simpleSelect {
		@include simpleSelect.XS;
	}
}

@mixin checkable {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 var(--pr-t-spacings-100);

	.radioField,
	.checkboxField,
	.switchField {
		order: -1;
	}

	.checkboxField {
		inset-block-start: var(--component-checkboxField-top);
	}

	.radioField {
		inset-block-start: var(--component-radioField-top);
	}
}

@mixin width($value) {
	--components-form-field-width: #{math.div($value, 2) * 1rem};
}

@mixin withArrow {
	padding-block-end: var(--pr-t-spacings-200);
	margin-block-end: 0;

	.form-field-arrow {
		@include box.arrow;
	}

	&:has(.switchField) {
		.form-field-arrow {
			@include box.arrowSwitch; // Arrow position for switch
		}
	}

	&:not(:has(:checked)) {
		.form-field-arrow {
			display: none;
		}
	}
}

@mixin withArrowS {
	padding-block-end: var(--pr-t-spacings-100);

	.form-field-arrow {
		@include box.arrowS;
	}

	&:has(.switchField) {
		.form-field-arrow {
			@include box.arrowSwitchS; // Arrow position for switch
		}
	}
}

// deprecated

@mixin overlay {
	&:focus-within {
		.textfield-input {
			box-shadow:
				form.fakeBorderOverlay(var(--components-field-framed-color)),
				0 0 0 4px var(--components-field-framed-color50);
			z-index: 4;
		}

		.is-error {
			.textfield-input {
				background-color: var(--palettes-neutral-0) !important;
			}
		}

		.is-warning {
			.textfield-input {
				background-color: #444242;
				box-shadow:
					form.fakeBorderOverlay(var(--palettes-warning-700)),
					0 0 0 4px var(--palettes-warning-50);
			}
		}

		.is-valid,
		.is-success {
			.textfield-input {
				background-color: var(--palettes-neutral-0);
				box-shadow:
					form.fakeBorderOverlay(var(--palettes-success-700)),
					0 0 0 4px var(--palettes-success-50);
			}
		}
	}

	.textfield,
	.checkbox,
	.radio,
	.select {
		+ .textfield,
		+ .checkbox,
		+ .radio,
		+ .select {
			position: absolute;
			inset-block-end: 0;
			inset-inline-end: 0;
			z-index: 10;
			padding-block: var(--components-field-framed-label-top-offset) var(--components-field-framed-bottom-padding);
			padding-inline: var(--components-field-framed-side-padding);
		}
	}
}

@mixin overlayTop {
	.textfield,
	.checkbox,
	.radio,
	.select {
		+ .textfield,
		+ .checkbox,
		+ .radio,
		+ .select {
			inset-block: 0 auto;
		}
	}
}

@mixin breakpoint($breakpoint, $i) {
	flex-basis: 100%;
	flex-grow: 0;

	@include media.min($breakpoint) {
		flex-basis: (math.div(100%, 12) * $i);
	}
}

@mixin framed {
	background-color: var(--palettes-neutral-0);
	padding: 0;
	box-shadow: form.fakeBorderOverlay(var(--palettes-neutral-200));
	transition: background-color var(--commons-animations-durations-standard);
	margin-block-end: 0 !important;

	&::before,
	&::after {
		content: ' ' / '';
		display: table;
	}

	&::after {
		clear: both;
	}

	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
		&:hover,
		&:focus {
			position: relative;
			z-index: 1;
			background-color: var(--palettes-neutral-0);
			box-shadow: form.fakeBorderOverlay(var(--palettes-neutral-600));
		}

		&:focus {
			z-index: 4;
			box-shadow:
				form.fakeBorderOverlay(var(--palettes-neutral-600)),
				0 0 0 4px var(--palettes-neutral-50);
		}
	}

	.radiosfield,
	.checkboxesfield {
		display: block;
		margin-block-start: var(--components-field-framed-side-padding);
		margin-block-end: 0;
		padding-block: 0 var(--components-field-framed-bottom-padding);
		padding-inline: var(--components-field-framed-side-padding);
	}

	&.is-disabled,
	&.is-readonly {
		background-color: var(--commons-disabled-background);
	}

	&.is-loading {
		@include loading.spinner;

		&::before,
		&::after {
			inset-block: var(--components-field-framed-side-padding) auto !important;
			inset-inline: auto var(--components-field-framed-side-padding) !important;
		}
	}
}

@mixin fieldMaterialState($fieldname, $state) {
	&:focus {
		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
	}

	@if ($state == 'error') {
		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
	}

	~ .#{$fieldname}-label {
		color: var(--palettes-#{$state}-700);
	}

	&:focus ~ .#{$fieldname}-label {
		color: var(--palettes-#{$state}-700);
	}
}

@mixin fieldMaterialError($fieldname) {
	@include fieldMaterialState($fieldname, 'error');
}

@mixin fieldMaterialFilled($fieldname) {
	~ .#{$fieldname}-label {
		font-size: var(--pr-t-font-body-S-fontSize);
		inset-block-start: 0;
	}
}

%isRequired {
	@layer mods {
		color: var(--palettes-error-700);
		display: inline-block;
		margin-inline-start: 0.2em;
		content: '*' / '';
	}
}

@mixin hiddenLabel {
	gap: 0;
}