@use "sass:meta";
@use "../01-abstract/variables" as *;

@use "sass:map";
@use "sass:math";

/**
 * 1/ Column - Make a column that return a percent value
 *
 * @author Nicolas Langle
 *
 * @param $device (based on $column-preset variable)
 * @param $nb-column
 * @param $nb-gutter
 * @param $total-column
 * @param $total-gutter
 *
 * Examples :
 *      column(6) 			-> return 6 column + 5 gutter of desktop preset
 *      column('m', 6) 		-> return 6 column + 5 gutter of mobile preset
 *      column(6, 5, 8)		-> return 6 column + 5 gutter of 8 grid size of desktop
 *
 * ------------------------------------------------------------------------------------
 *
 * 2/ Column px - Make a column that return a pixel value
 *
 * @author Nicolas Langle
 *
 * @param $device (based on $column-preset variable)
 * @param $nb-column
 * @param $nb-gutter
 * @param $unitless
 *
 * Examples :
 *      column(6) 			-> return 6 column + 5 gutter of desktop preset with px unit
 *      column(6, true) 	-> return 6 column + 5 gutter of desktop preset without px unit
 *
 * ------------------------------------------------------------------------------------
 *
 * 3/ Column full - Make a column that return a percent value of the full width container (100%) minus mobile external gutter width * 2
 *
 * @author Nicolas Langle
 *
 * @param $device (based on $column-preset variable)
 * @param $nb-column
 * @param $nb-gutter
 *
 * Examples :
 *      column(6) -> return 6 column + 5 gutter of desktop preset
 *
 */

// ----
// column-set-var
// ----

@function column-set-var($var, $device, $prop) {

	@if not $var {

		@return map.get(map.get($column-preset, $device), $prop);
	} @else {

		@return $var;
	}
}

// ----
// column - return a percent value
// ----

@function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) {
	// shift vars if $device is number
	@if meta.type-of($device) == "number" {
		$total-gutter: $total-column;
		$total-column: $nb-gutter;
		$nb-gutter: $nb-column;
		$nb-column: $device;
		$device: d;
	}

	$preset: map.get($column-preset, $device);
	$gutter-width: map.get($preset, gutter-width);
	$column-width: map.get($preset, column-width);
	$total-column: column-set-var($total-column, $device, total-column);

	@if not $nb-gutter {
		$nb-gutter: $nb-column - 1;
	}

	@if not $total-gutter {
		$total-gutter: $total-column - 1;
	}

	@return math.div($nb-column * $column-width + $nb-gutter * $gutter-width, $total-column * $column-width + $total-gutter * $gutter-width) * 100%;
}

// ----
// column px, return a pixel value
// ----

@function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) {
	// shift vars if $device is number
	@if meta.type-of($device) == "number" {
		$nb-gutter: $nb-column;
		$nb-column: $device;
		$device: d;
	}

	$preset: map.get($column-preset, $device);
	$gutter-width: map.get($preset, gutter-width);
	$column-width: map.get($preset, column-width);

	@if not $nb-gutter {
		$nb-gutter: $nb-column - 1;
	}

	@if $unitless == true {
		@return $nb-column * $column-width + $nb-gutter * $gutter-width;
	}

	@return #{$nb-column * $column-width + $nb-gutter * $gutter-width}px;
}

// ----
// column full - return a percent value of the full width container (100%) minus mobile external gutter width * 2
// ----

@function column-full($device, $nb-column: null, $nb-gutter: null) {
	// shift vars if $device is number
	@if meta.type-of($device) == "number" {
		$nb-gutter: $nb-column;
		$nb-column: $device;
		$device: d;
	}

	$preset: map.get($column-preset, $device);
	$gutter-width: map.get($preset, gutter-width);
	$column-width: map.get($preset, column-width);
	$total-column: map.get($preset, total-column);

	$width: column-px($device, $nb-column, $nb-gutter, true);

	@return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});
}
