// |------------------------------------------------------
// |------------------------------------------------------
// | Settings mixins
// |------------------------------------------------------
// |------------------------------------------------------

/**
 * @name 	Setting mixins
 * This are all the mixins that are exposed by gridle for the setting up your grid.
 */

/**
 * Setting up your grid
 * @param 		{Map} 		$settings 		Your default grid settings
 * @example 	scss
 * // default settings
 * $_gridle-settings : (
 *	name : default,
 *	min-width : null,
 *	max-width : null,
 *	query : null,
 *	classes : true,
 *	context : 12,
 *	column-width : null,
 *	gutter-width : 20px,
 *	gutter-height : 0,
 *	gutter-top : 0,
 *	gutter-right : 10px,
 *	gutter-bottom : 0,
 *	gutter-left : 10px,
 *	direction : ltr,
 *	dir-attribute : false,
 *	name-multiplicator : 1,
 *	states-classes : false,
 *	classes-prefix : null
 * );
 *
 * // setting up your grid
 * \@include g-setup((
 * 	context : 12
 * 	// other settings
 * ));
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-setup(
	$settings : ()
) {
	// prepare state
	$settings : _g-prepare-state-settings($settings);

	// extend default settings
	$_gridle-settings : map-merge((
		name : default,
		min-width : null,
		max-width : null,
		query : null,
		classes : true,
		context : 12,
		column-width : null,
		gutter-width : 20px,
		gutter-height : 0,
		gutter-top : 0,
		gutter-right : 10px,
		gutter-bottom : 0,
		gutter-left : 10px,
		direction : ltr,
		dir-attribute : false,
		name-multiplicator : 1,
		states-classes : false,
		classes-prefix : null
	), $settings) !global;

	// register default state :
	@include g-register-state(default, $_gridle-settings);

	// set current state to default
	$_g-current-state : $_gridle-settings !global;
	$_g-current-stateName : default !global;
}

/**
 * Register a new state with some settings
 * @param 		{String} 		$name 		The new state name
 * @param 		{Map} 			$settings 	The state settings
 * @example 	scss
 * \@include g-register-state(mobile, (
 * 	max-width : 600px
 * ));
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-register-state(
	$name,
	$settings : ()
) {
	// prepare state
	$settings : _g-prepare-state-settings($settings);

	// settings :
	$settings : map-merge($_gridle-settings, $settings);

	// set name :
	$settings : map-set($settings, name, $name);

	// gutter sizes :
	$gutter-top : map-get($settings, gutter-top);
	$gutter-right : map-get($settings, gutter-right);
	$gutter-bottom : map-get($settings, gutter-bottom);
	$gutter-left : map-get($settings, gutter-left);

	// add state in maps :
	$_g-states : map-set($_g-states, $name, $settings) !global;

	// add rules if gutter is different
	@if $gutter-top != map-get($_gridle-settings, gutter-top)
		or $gutter-right != map-get($_gridle-settings, gutter-right)
		or $gutter-bottom != map-get($_gridle-settings, gutter-bottom)
		or $gutter-left != map-get($_gridle-settings, gutter-left) {
		$gutters : _g-forge-gutters-map(top right bottom left, $name);
		@include g-apply-css-for(grid grid-grow grid-adapt, (
			g-gutter : right left
		), $name);
	}

	// add rules if direction is different
	$direction : map-get($settings, direction);
	@if $direction != map-get($_gridle-settings, direction) {
		$float : left;
		@if $direction == rtl {
			$float : right;
		}
		@include g-apply-css-for(grid, (
			direction : $direction,
			float : $float
		), $name);
	}

	/**
	 * @name 	#{g-get-state-var(name, $name)} State
	 * Here's the settings for the **#{g-get-state-var(name, $name)}** state.
	 * @styleguide 	Gridle / States
	 * @display 	gridle-settings
	 * @gridle-name 	#{g-get-state-var(name, $name)}
	 * @gridle-min-width 	#{g-get-state-var(min-width, $name)}
	 * @gridle-max-width 	#{g-get-state-var(max-width, $name)}
	 * @gridle-query 	#{g-get-state-var(query, $name)}
	 * @gridle-classes 	#{g-get-state-var(classes, $name)}
	 * @gridle-context 	#{g-get-state-var(context, $name)}
	 * @gridle-gutter-width 	#{g-get-state-var(gutter-width, $name)}
	 * @gridle-gutter-height 	#{g-get-state-var(gutter-height, $name)}
	 * @gridle-gutter-top 	#{g-get-state-var(gutter-top, $name)}
	 * @gridle-gutter-right 	#{g-get-state-var(gutter-right, $name)}
	 * @gridle-gutter-bottom 	#{g-get-state-var(gutter-bottom, $name)}
	 * @gridle-gutter-left 	#{g-get-state-var(gutter-left, $name)}
	 * @gridle-direction 	#{g-get-state-var(direction, $name)}
	 * @gridle-dir-attribute 	#{g-get-state-var(dir-attribute, $name)}
	 * @gridle-name-multiplicator 	#{g-get-state-var(name-multiplicator, $name)}
	 * @gridle-states-classes 	#{g-get-state-var(states-classes, $name)}
	 * @gridle-classes-prefix 	#{g-get-state-var(classes-prefix, $name)}
	 */
}


/**
 * Register some clear each that will been generated in classes
 * @param 		{Integer} 		$count 		The n each item to clear
 * @param 		{String} 		$what 		What to clear (left, right, both)
 * @example 	scss
 * \@include g-register-clear-each(2, left);
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-register-clear-each(
	$count,
	$clearWhat
) {
	// create the clear map :
	$classMap : (
		clearEach : $count,
		clearWhat : $clearWhat
	);

	// append to map :
	$_g-clear-classes : map-set($_g-clear-classes, $count, $classMap) !global;
}


/**
 * Register a new custom column in case the generated ones are not enough.
 * This is useful when you have a 12 columns grid and you need some 1/5 ones.
 * @param 		{String} 		$name 		The column name
 * @param 		{Integer} 		$columns 	The column width
 * @param 		{Integer} 		$context 	The context on which to calculate the column width
 *
 * @example 	scss
 * \@include g-register-column(1on5, 1, 5);
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-register-column(
	$name,
	$columns,
	$context
) {
	// create a column :
	$col : _g-create-column($name, $columns, $context);

	// add column in maps :
	$_g-columns : map-set($_g-columns, $name, $col) !global;
}


/**
 * Set a pattern for a specified package used to generate the classnames
 * @param 		{String} 	$package 		The package name to specify the pattern for
 * @param 		{List} 		$pattern 		The new classname pattern
 *
 * @example 	scss
 * \@include g-set-classname-map(grid, ('grid','-','%count','@','%state'));
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-set-classname-map(
	$package,
	$pattern
) {
	// get the map
	$map : map-get($_gridle-packages, $package);
	// set the new classname
	$map : map-set($map, classname, $pattern);
	// set the classmap
	$_gridle-packages : map-set($_gridle-packages, $package, $map) !global;
}


/**
 * Set a generic selector for a specific package. This generic selector will be used to target some elements like [class*="gr-"].
 * If not specified for a package, the generic selector will be generated automatically but sometimes it's better to hardcode it.
 * @param 		{String} 		$package 		The package to specify the generic selector for
 * @param 		{String} 		$selector 		The generic selector like [class*="gr-"], or whatever...
 * @example 	scss
 * \@include g-set-generic-selector(grid, '[class*="gr-"]');
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-set-generic-selector(
	$package,
	$selector
) {
	// get the map
	$map : map-get($_gridle-packages, $package);
	// set the new classname
	$map : map-set($map, generic-selector, $selector);
	// set the classmap
	$_gridle-packages : map-set($_gridle-packages, $package, $map) !global;
}



//
// Extend a gridle class
//
// map format :
// (
// 	grid : (
// 		mobile : (
// 			padding : 10px,
// 			float : left
// 		),
// 		tablet : (
// 			padding : 10px
// 		)
// 	),
// 	flex-grid : (
// 		mobile : (
// 			padding : 10px
// 		)
// 	)
// )
//
// @mixin g-extend-base-class(
// 	$for,
// 	$extend,
// 	$statesNames : null
// ) {
// 	// if $states is all
// 	@if $statesNames == null {
// 		$statesNames : g-get-states-names();
// 	}

// 	// allow multiple "$for"
// 	@each $f in $for {

// 		// get the map for the passed mixin "category"
// 		$forMap : map-get($_g-extend-base-classes, $f);

// 		// create the map if not exist
// 		@if $forMap == null { $forMap : (); }

// 		// loop on each states to register an extend map
// 		@each $stateName in $statesNames {

// 			// check if has a map for the state
// 			$forStateMap : map-get($forMap, $stateName);
// 			@if $forStateMap == null {
// 				$forStateMap : ();
// 			}

// 			// merge map
// 			$forStateMap : map-merge($forStateMap, $extend);

// 			// set the new state map into forMap
// 			$forMap : map-set($forMap, $stateName, $forStateMap);

// 			// set the map in the gridle global variable
// 			$_g-extend-base-classes : map-set($_g-extend-base-classes, $f, $forMap) !global;

// 		}

// 	}
// }
// @TODO : Docblock for g-extend-base-class
@mixin g-extend-base-class(
	$for,
	$extend,
	$statesNames : null
) {
	// if $states is all
	@if $statesNames == null {
		$statesNames : g-get-states-names();
	}

	// allow multiple "$for"
	@each $stateName in $statesNames {

		// get the map for the passed mixin "category"
		$stateMap : map-get($_g-extend-base-classes, $stateName);

		// create the map if not exist
		@if $stateMap == null { $stateMap : (); }

		// loop on each states to register an extend map
		@each $f in $for {

			// check if has a map for the state
			$forStateMap : map-get($stateMap, $f);
			@if $forStateMap == null {
				$forStateMap : ();
			}

			// merge map
			$forStateMap : map-merge($forStateMap, $extend);

			// set the new state map into forMap
			$stateMap : map-set($stateMap, $f, $forStateMap);

			// set the map in the gridle global variable
			$_g-extend-base-classes : map-set($_g-extend-base-classes, $stateName, $stateMap) !global;
		}
	}
}

//
// Apply css for
//
// map format :
// (
// 	(
// 		grid : (
// 			mobile : (
// 				padding : 0,
// 				margin : 0
// 			),
// 			tablet : (
// 				padding : 0
// 			)
// 		)
// 	),
// 	(
// 		etc...
// 	)
// )
// @mixin g-apply-css-for(
// 	$for,
// 	$extend,
// 	$statesNames : null
// ) {

// 	// if statesNames is null, mean that it's all the states
// 	@if $statesNames == null {
// 		$statesNames : g-get-states-names();
// 	}

// 	// allow multiple "$for"
// 	@each $f in $for {

// 		// get the map for the passed mixin "category"
// 		$stateMap : ();

// 		// loop on each states to register an extend map
// 		@each $stateName in $statesNames {
// 			// add the css
// 			$stateMap : map-set($stateMap, $stateName, $extend);
// 		}

// 		// set in map
// 		$forMap : map-set((), $f, $stateMap);

// 		// set the map in the gridle global variable
// 		$_g-apply-css-for : append($_g-apply-css-for, $forMap) !global;

// 	}
// }
// @TODO : Docblock for g-apply-css-for
@mixin g-apply-css-for(
	$for,
	$extend,
	$statesNames : null
) {

	// if statesNames is null, mean that it's all the states
	@if $statesNames == null {
		$statesNames : g-get-states-names();
	}

	// allow multiple "$for"
	@each $stateName in $statesNames {

		// get the map for the passed mixin "category"
		$forMap : ();

		// loop on each states to register an extend map
		@each $f in $for {
			// add the css
			$forMap : map-set($forMap, $f, $extend);
			// $stateMap : map-set($stateMap, $stateName, $extend);
		}

		// set in map
		$statesMap : map-set((), $stateName, $forMap);

		// set the map in the gridle global variable
		$_g-apply-css-for : append($_g-apply-css-for, $statesMap) !global;
	}
}


/**
 * Register some basics states:
 *
 * - mobile : 0 to 480px
 * - tablet : 481px to 1024px
 *
 * @example 	scss
 * \@include g-register-default-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-register-default-states() {
	@include g-register-state(mobile, (
		max-width : 480px
	));
	@include g-register-state(tablet, (
		min-width : 481px,
		max-width : 1024px
	));
}


/**
 * Register some basics mobile first states:
 *
 * - mobile : 320px to infinite
 * - tablet : 640px to infinite
 * - desktop : 992px to infinite
 * - large : 1200px to infinite
 *
 * @example 	scss
 * \@include g-register-mobile-first-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-register-mobile-first-states() {
	@include g-register-state(mobile, (
		min-width : 320px
	));
	@include g-register-state(tablet, (
		min-width : 640px
	));
	@include g-register-state(desktop, (
		min-width : 992px
	));
	@include g-register-state(large, (
		min-width : 1200px
	));
}


/**
 * Register bootstrap 3 states
 *
 * - xs : 0 to 750px
 * - sm : 750px to infinite
 * - md : 970px to infinite
 * - lg : 1170px to infinite
 *
 * @example 	scss
 * \@include g-register-bootstrap3-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-register-bootstrap3-states() {
	@include g-register-state(xs, (
		max-width : 750px
	));
	@include g-register-state(sm, (
		min-width : 750px
	));
	@include g-register-state(md, (
		min-width : 768px
	));
	@include g-register-state(lg, (
		min-width : 1200px
	));
}


/**
 * Register bootstrap 4 states
 *
 * - xs : 0 to 576px
 * - sm : 576px to infinite
 * - md : 970px to infinite
 * - lg : 1200px to infinite
 *
 * @example 	scss
 * \@include g-register-bootstrap4-states();
 *
 * @author 		Olivier Bossel <olivier.bossel@gmail.com>
 */
@mixin g-register-bootstrap4-states() {
	@include g-register-state(xs, (
		max-width : 576px
	));
	@include g-register-state(sm, (
		min-width : 576px
	));
	@include g-register-state(md, (
		min-width : 768px
	));
	@include g-register-state(lg, (
		min-width : 1200px
	));
}