@use 'sass:string';
@use 'sass:map';
@use 'sass:math';

@use '@lucca-front/scss/src/commons/config';

@function pxToEm($value) {
	@return math.div($value, 16px) * 1em;
}

// Range queries have been supported since Safari 16.4. They can therefore be used in theory.
// However, they only provide a different syntax and penalize some users who don’t have their browser up to date.

// les requêtes simples et multiples

@mixin query($breakpoint, $property: 'width', $max: false, $at: 'media', $name: '') {
	$reversed: '';

	@if $max {
		$reversed: 'not all and';

		@if $at == 'container' {
			$reversed: 'not';
		}
	}

	@if map.get(config.$breakpoints, $breakpoint) {
		$breakpoint: pxToEm(map.get(config.$breakpoints, $breakpoint));
	}

	// stylelint-disable-next-line scss/at-rule-no-unknown
	@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint}) {
		@content;
	}
}

@mixin queries($breakpoint1, $breakpoint2, $property: 'width', $at: 'media', $name: '') {
	$reversed: 'not all and';

	@if $at == 'container' {
		$reversed: 'not';
	}

	@if map.get(config.$breakpoints, $breakpoint1) {
		$breakpoint1: pxToEm(map.get(config.$breakpoints, $breakpoint1));
	}

	@if map.get(config.$breakpoints, $breakpoint2) {
		$breakpoint2: pxToEm(map.get(config.$breakpoints, $breakpoint2));
	}

	// si le breakpoint2 est plus petit que le breakpoint1, on les inverse
	@if ($breakpoint2 < $breakpoint1) {
		$breakpointTmp: $breakpoint2;
		$breakpoint2: $breakpoint1;
		$breakpoint1: $breakpointTmp;
	}

	// stylelint-disable scss/at-rule-no-unknown
	@#{$at} #{$name} (min-#{$property}: #{$breakpoint1}) {
		@#{$at} #{$name} #{$reversed} (min-#{$property}: #{$breakpoint2}) {
			@content;
		}
	}
	// stylelint-enable
}

// les raccourcis vers les requêtes pour min/max/between

@mixin min($breakpoint, $property: 'width', $at: 'media') {
	@include query($breakpoint, $property: $property, $at: $at) {
		@content;
	}
}

@mixin max($breakpoint, $property: 'width', $at: 'media') {
	@include query($breakpoint, $property: $property, $max: true, $at: $at) {
		@content;
	}
}

@mixin between($breakpoint1, $breakpoint2, $property: 'width', $at: 'media') {
	@include queries($breakpoint1, $breakpoint2, $property: $property, $at: $at) {
		@content;
	}
}

// les raccourcis vers les requêtes pour minWidth/maxWidth/betweenWidths

@mixin minWidth($breakpoint, $at: 'media') {
	@include query($breakpoint, $at: $at) {
		@content;
	}
}

@mixin maxWidth($breakpoint, $at: 'media') {
	@include query($breakpoint, $max: true, $at: $at) {
		@content;
	}
}

@mixin betweenWidths($breakpoint1, $breakpoint2, $at: 'media') {
	@include queries($breakpoint1, $breakpoint2, $at: $at) {
		@content;
	}
}

// les raccourcis vers les requêtes pour minHeight/maxHeight/betweenHeights

@mixin minHeight($breakpoint, $at: 'media') {
	@include query($breakpoint, 'height', $at: $at) {
		@content;
	}
}

@mixin maxHeight($breakpoint, $at: 'media') {
	@include query($breakpoint, $max: true, $property: 'height', $at: $at) {
		@content;
	}
}

@mixin betweenHeights($breakpoint1, $breakpoint2, $at: 'media') {
	@include queries($breakpoint1, $breakpoint2, $property: 'height', $at: $at) {
		@content;
	}
}

@mixin pointer($query, $any: false, $reversed: false) {
	$mediaString: 'media';
	$anyString: '';

	@if $reversed {
		$mediaString: 'media not';
	}

	@if $any {
		$anyString: 'any-';
	}

	// stylelint-disable-next-line scss/at-rule-no-unknown, @stylistic/at-rule-name-case
	@#{$mediaString} (#{$anyString}pointer: #{$query}) {
		@content;
	}
}

@mixin isTouchDevice {
	@include pointer(coarse, $any: true) {
		@content;
	}
}

@mixin isNotTouchDevice {
	@include pointer(coarse, $any: true, $reversed: true) {
		@content;
	}
}