@use 'vars' as *;
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/reset';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	position: relative;
	display: table;
	inline-size: 100%;
	padding-block: 0 calc(var(--components-indexTable-padding) - var(--components-indexTable-row-spacing));
	padding-inline: var(--components-indexTable-padding);
	border-collapse: separate;
	border-spacing: 0 var(--components-indexTable-row-spacing);
	border-radius: var(--components-indexTable-border-radius);
	background-color: var(--components-indexTable-background-color);
	color: var(--pr-t-color-text);
	contain: paint;

	@at-root ($atRoot) {
		.indexTable-head {
			display: table-header-group;
			vertical-align: bottom;
		}

		.indexTable-body {
			display: table-row-group;
		}

		// There might be more than one footer
		.indexTable-foot {
			display: table-row-group;

			&:is(tfoot) {
				display: table-footer-group;
			}
		}

		.indexTable-head-row,
		.indexTable-body-row,
		.indexTable-foot-row {
			display: var(--components-indexTable-row-display);
		}

		.indexTable-head-row-transparentCell,
		.indexTable-body-row-transparentCell,
		.indexTable-head-row-cell,
		.indexTable-body-row-cell,
		.indexTable-foot-row-cell {
			display: table-cell;
			text-align: start;
			font-weight: var(--pr-t-font-fontWeight-regular);

			&:first-child {
				.checkboxField {
					--component-checkboxField-top: 0;
				}
			}
		}

		.indexTable-head-row-transparentCell,
		.indexTable-body-row-transparentCell {
			vertical-align: middle;
			padding-block: var(--pr-t-spacings-50);
			padding-inline: 0;
			position: relative;
			z-index: 3;

			&:not(:first-child) {
				padding-inline-end: var(--components-indexTable-cell-paddingInline);
			}
		}

		.indexTable-head-row-cell,
		.indexTable-body-row-cell,
		.indexTable-foot-row-cell {
			vertical-align: top;
			padding-block: var(--components-indexTable-cell-paddingBlock);
			padding-inline: var(--components-indexTable-cell-paddingInline);
		}

		.indexTable-body-row {
			border-radius: var(--pr-t-border-radius-default);

			&:has(.indexTable-body-row-cell-link) {
				.indexTable-body-row-cell {
					&:not(:has(button, a, input, textarea, select, details, [tabindex='0']), .mod-allowTextSelection) {
						pointer-events: none;
					}
				}
			}

			&:not(:has(.indexTable-body-row-cell-link)) {
				&:has(.indexTable-body-row-cell-action) {
					cursor: pointer;
				}
			}
		}

		.indexTable-head-row-cell {
			color: var(--pr-t-color-text-subtle);
		}

		.indexTable-foot-row-cell {
			text-align: end;
			padding-block: var(--pr-t-spacings-50);
		}

		.indexTable-body-row-cell {
			position: relative;
			z-index: var(--components-indexTable-cell-z-index, 1);
			border: var(--commons-divider-width) 0 solid transparent;

			// Apparence of the first cell with a card apparence.
			// We do this because there migh be one or two cells before without background and containing a checkbox
			--components-indexTable-cell-inset-x-left: var(--components-indexTable-cell-inset-x);
			--components-indexTable-cell-border-radius-left: var(--components-indexTable-cell-border-radius);
			--components-indexTable-cell-border-radius-right: 0;
			--components-indexTable-outline-border-radius-left: var(--components-indexTable-outline-border-radius);
			--components-indexTable-outline-border-radius-right: 0;
			--components-indexTable-outline-border-width-left: var(--components-indexTable-outline-border-width);
			--components-indexTable-outline-border-width-right: 0;

			// Apparence of the nexts cells
			~ .indexTable-body-row-cell {
				--components-indexTable-cell-inset-x-left: 0px;
				--components-indexTable-shadow-mask:
					calc(var(--pr-t-spacings-100) * -1) 0px 0px 0px
					var(--components-indexTable-cell-background-color, var(--components-indexTable-cell-background-color-default));
				--components-indexTable-cell-border-radius-left: 0;
				--components-indexTable-outline-border-radius-left: 0;
				--components-indexTable-outline-border-width-left: 0;
			}

			// Apparence of the last cell with a card apparence
			&:last-child {
				--components-indexTable-cell-inset-x-right: var(--components-indexTable-cell-inset-x);
				--components-indexTable-cell-border-radius-right: var(--components-indexTable-cell-border-radius);
				--components-indexTable-outline-border-radius-right: var(--components-indexTable-outline-border-radius);
				--components-indexTable-outline-border-width-right: var(--components-indexTable-outline-border-width);
			}

			&::before,
			&::after {
				content: '';
				position: absolute;
				z-index: -1;
				transition-duration: var(--commons-animations-durations-fast);
			}

			// The "card" apparence is put on a ::before pseudo element
			&::before {
				inset:
					var(--components-indexTable-cell-inset-y, 0)
					var(--components-indexTable-cell-inset-x-right, 0)
					var(--components-indexTable-cell-inset-y, 0)
					var(--components-indexTable-cell-inset-x-left, 0);
				border-radius:
					var(--components-indexTable-cell-border-radius-left)
					var(--components-indexTable-cell-border-radius-right)
					var(--components-indexTable-cell-border-radius-right)
					var(--components-indexTable-cell-border-radius-left);
				background-color: var(--components-indexTable-cell-background-color, var(--components-indexTable-cell-background-color-default));

				// shadow-mask : since the card apparence is put on every cell (du to a Safari bug), we need to hide the left part of the box shadow for everycell exept the first one.
				// We do this with a rectangular white box-shadow above it.
				box-shadow:
					var(--components-indexTable-shadow-mask, 0 0 0 0),
					var(--components-indexTable-cell-shadow, var(--components-indexTable-cell-shadow-default));
				transition-property: inset, box-shadow, background-color;
			}

			// The focus outline, when needed
			&::after {
				inset:
					calc(var(--components-indexTable-cell-inset-y, 0px) - var(--components-indexTable-outline-offset))
					calc(var(--components-indexTable-cell-inset-x-right, 0px) - var(--components-indexTable-outline-offset))
					calc(var(--components-indexTable-cell-inset-y, 0px) - var(--components-indexTable-outline-offset))
					calc(var(--components-indexTable-cell-inset-x-left, 0px) - var(--components-indexTable-outline-offset));
				border-radius:
					var(--components-indexTable-outline-border-radius-left)
					var(--components-indexTable-outline-border-radius-right)
					var(--components-indexTable-outline-border-radius-right)
					var(--components-indexTable-outline-border-radius-left);
				border-block-width: var(--components-indexTable-outline-border-width);
				border-inline-width: var(--components-indexTable-outline-border-width-left) var(--components-indexTable-outline-border-width-right);
				border-style: solid;
				border-color: var(--components-indexTable-outline-color);
				opacity: var(--components-indexTable-outline-opacity, 0);
				transition-property: inset;
			}

			// No shadow if the row contain an emptyState
			&:has(.emptyState) {
				--components-indexTable-cell-shadow: none;
			}
		}

		.indexTable-body-row-cell-checkbox,
		.indexTable-head-row-cell-checkbox {
			margin: var(--pr-t-spacings-50);
		}

		// .indexTable-body-row-cell-action is deprecated
		.indexTable-body-row-cell-action {
			@include a11y.mask;
		}

		.indexTable-body-row-cell-link {
			@include reset.button;

			text-decoration: none;

			&::after {
				content: '';
				position: absolute;
				inset: 0 -9999px;
				z-index: -1;
			}

			&,
			&:hover {
				color: currentColor;
			}

			&:focus-visible {
				outline: none;
			}
		}

		.indexTable-body-row-cellTitle {
			position: relative;
			display: flex;
			align-items: center;
			gap: var(--pr-t-spacings-100);
			padding: var(--pr-t-spacings-25);
			font-weight: var(--pr-t-font-fontWeight-semibold);
			inline-size: fit-content;
		}

		.indexTable-body-row-cellTitle-title {
			font-weight: var(--pr-t-font-fontWeight-semibold);
		}

		// A wrapper is needed for pagination
		.indexTableWrapper {
			@include vars;

			display: flex;
			flex-direction: column;
			padding-block-end: var(--pr-t-spacings-100);
			border-radius: var(--components-indexTable-border-radius);
			background-color: var(--components-indexTable-background-color);

			.indexTable {
				flex-grow: 1;
				padding-block-end: 0;
			}

			.pagination {
				align-self: flex-end;
				padding-block: var(--pr-t-spacings-50) 0;
				padding-inline: 0;
				margin-inline-end: var(--pr-t-spacings-100);
			}
		}

		.indexTableWrapper-pagination {
			&:empty {
				display: none;
			}
		}
	}

	.statusBadge,
	.tag,
	.avatar {
		vertical-align: top;
	}

	.statusBadge,
	.tag {
		margin-block-start: var(--pr-t-spacings-25);
	}

	.avatarWrapper {
		display: inline-flex;
	}

	.tableSortable.button:hover {
		--components-button-backgroundColor: var(--palettes-neutral-100);

		color: var(--palettes-neutral-700);
	}
}