@use 'sass:string';

@use '@lucca-front/scss/src/commons/utils/media';
@use '@lucca-front/scss/src/commons/utils/container';
@use '@lucca-front/scss/src/commons/config';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: grid;
	grid-template-columns: var(--grid-template-columns);
	gap: var(--grid-row-gap) var(--grid-column-gap);

	// workaround for Angular replacing CamelCase by kebab-case
	// max-inline-size: var(--grid-max-width, var(--grid-maxWidth));
	inline-size: var(--grid-max-width, var(--grid-maxWidth));
	max-inline-size: 100%;

	@at-root ($atRoot) {
		.grid-containerWrapper {
			container-type: inline-size;
			container-name: grid;
		}

		.grid-column {
			align-self: var(--grid-align, var(--grid-column-align));
			justify-self: var(--grid-justify, var(--grid-column-justify));
			grid-column-start: var(--grid-column, var(--grid-column-start));
			grid-row-start: var(--grid-row, var(--grid-row-start));
			grid-column-end: span var(--grid-colspan, var(--grid-column-end));
			grid-row-end: span var(--grid-rowspan, var(--grid-row-end));
			min-inline-size: 0;

			@each $breakpoint, $value in config.$breakpoints {
				@include media.min($breakpoint) {
					&[style*='grid-colspanAtMediaMin#{$breakpoint}'] {
						grid-column-end: span var(--grid-colspanAtMediaMin#{$breakpoint});
					}

					&[style*='grid-rowspanAtMediaMin#{$breakpoint}'] {
						grid-row-end: span var(--grid-rowspanAtMediaMin#{$breakpoint});
					}

					&[style*='grid-columnAtMediaMin#{$breakpoint}'] {
						grid-column-start: var(--grid-columnAtMediaMin#{$breakpoint});
					}

					&[style*='grid-rowAtMediaMin#{$breakpoint}'] {
						grid-row-start: var(--grid-rowAtMediaMin#{$breakpoint});
					}

					// stylelint-disable custom-property-pattern -- TODO Make PR to Stylelint to take SCSS function within CSS variable into consideration.
					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)}'] {
						grid-column-end: span var(--grid-colspan-at-media-min-#{string.to-lower-case($breakpoint)});
					}

					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-rowspan-at-media-min-#{string.to-lower-case($breakpoint)}'] {
						grid-row-end: span var(--grid-rowspan-at-media-min-#{string.to-lower-case($breakpoint)});
					}

					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-column-at-media-min-#{string.to-lower-case($breakpoint)}'] {
						grid-column-start: var(--grid-column-at-media-min-#{string.to-lower-case($breakpoint)});
					}

					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-row-at-media-min-#{string.to-lower-case($breakpoint)}'] {
						grid-row-start: var(--grid-row-at-media-min-#{string.to-lower-case($breakpoint)});
					}
				}

				@include container.min($breakpoint, $name: grid) {
					&[style*='grid-colspanAtContainerMin#{$breakpoint}'] {
						grid-column-end: span var(--grid-colspanAtContainerMin#{$breakpoint});
					}

					&[style*='grid-rowspanAtContainerMin#{$breakpoint}'] {
						grid-row-end: span var(--grid-rowspanAtContainerMin#{$breakpoint});
					}

					&[style*='grid-columnAtContainerMin#{$breakpoint}'] {
						grid-column-start: var(--grid-columnAtContainerMin#{$breakpoint});
					}

					&[style*='grid-rowAtContainerMin#{$breakpoint}'] {
						grid-row-start: var(--grid-rowAtContainerMin#{$breakpoint});
					}

					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-colspan-at-container-min-#{string.to-lower-case($breakpoint)}'] {
						grid-column-end: span var(--grid-colspan-at-container-min-#{string.to-lower-case($breakpoint)});
					}

					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-rowspan-at-container-min-#{string.to-lower-case($breakpoint)}'] {
						grid-row-end: span var(--grid-rowspan-at-container-min-#{string.to-lower-case($breakpoint)});
					}

					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-column-at-container-min-#{string.to-lower-case($breakpoint)}'] {
						grid-column-start: var(--grid-column-at-container-min-#{string.to-lower-case($breakpoint)});
					}

					// workaround for Angular replacing CamelCase by kebab-case
					&[style*='grid-row-at-container-min-#{string.to-lower-case($breakpoint)}'] {
						grid-row-start: var(--grid-row-at-container-min-#{string.to-lower-case($breakpoint)});
					}
					// stylelint-enable
				}
			}
		}
	}
}