@use "sass:map";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/helpers";
@use "@db-ui/foundations/build/styles/animation";
@use "@db-ui/foundations/build/styles/colors";
@use "../../styles/internal/component";
@use "../../styles/dialog-init";

%direction-right {
	inset-inline: auto 0;

	&[data-rounded="true"] {
		border-start-start-radius: variables.$db-border-radius-sm;
		border-end-start-radius: variables.$db-border-radius-sm;
	}
}

%direction-left {
	inset-inline: 0 auto;

	&[data-rounded="true"] {
		border-start-end-radius: variables.$db-border-radius-sm;
		border-end-end-radius: variables.$db-border-radius-sm;
	}
}

%full-horizontal {
	&:not([data-width="full"]) {
		max-block-size: var(
			--db-drawer-max-height,
			calc(100% - #{variables.$db-spacing-fixed-xl})
		);
		max-inline-size: none;
	}
}

%direction-up {
	@extend %full-horizontal;

	inset: auto 0 0;

	&[data-rounded="true"] {
		border-start-end-radius: variables.$db-border-radius-sm;
		border-start-start-radius: variables.$db-border-radius-sm;
	}
}

%direction-down {
	@extend %full-horizontal;

	inset: 0 0 auto;

	&[data-rounded="true"] {
		border-end-end-radius: variables.$db-border-radius-sm;
		border-end-start-radius: variables.$db-border-radius-sm;
	}
}

$spacings: (
	"small": (
		"block": variables.$db-spacing-fixed-xs,
		"inline": variables.$db-spacing-fixed-md
	),
	"medium": (
		"block": variables.$db-spacing-fixed-sm,
		"inline": variables.$db-spacing-fixed-lg
	),
	"large": (
		"block": variables.$db-spacing-fixed-md,
		"inline": variables.$db-spacing-fixed-xl
	),
	"none": (
		"block": 0,
		"inline": 0
	)
);

@mixin get-spacing($spacing) {
	padding-block: map.get($spacing, "block");

	.db-drawer-header {
		// We need this variable to overwrite it inside the header
		/* stylelint-disable-next-line db-ui/use-spacings */
		padding-block-end: var(
			--db-drawer-header-padding-block-end,
			#{map.get($spacing, "block")}
		);
		padding-inline: map.get($spacing, "inline");
	}

	.db-drawer-content {
		// We need this variable to overwrite it inside the header
		/* stylelint-disable-next-line db-ui/use-spacings */
		padding-inline: var(
			--db-drawer-content-padding-inline,
			#{map.get($spacing, "inline")}
		);
		// TODO: Evaluate whether we need overflow: hidden and that for only specifically set y here.
		overflow-y: auto;
	}
}

%spacing-drawer {
	@each $name, $spacing in $spacings {
		@if ($name == "medium") {
			@include get-spacing($spacing);
		}

		&[data-spacing="#{$name}"] {
			@include get-spacing($spacing);
		}
	}
}

.db-drawer {
	.db-drawer-container {
		@extend %direction-right;
		@extend %spacing-drawer;

		display: flex;
		flex-direction: column;
		background-color: colors.$db-adaptive-bg-basic-level-1-default;
		block-size: 100%;
		inline-size: 100%;
		position: fixed;
		box-shadow: variables.$db-elevation-md;

		&:not([data-width="full"]) {
			max-inline-size: var(
				--db-drawer-max-width,
				calc(100% - #{variables.$db-spacing-fixed-xl})
			);
		}

		&[data-rounded="true"] {
			box-shadow: variables.$db-elevation-md;
		}

		&[data-direction="left"] {
			@extend %direction-left;
		}

		&[data-direction="up"] {
			@extend %direction-up;
		}

		&[data-direction="down"] {
			@extend %direction-down;
		}

		.db-drawer-header {
			@include helpers.divider("bottom");

			display: none;

			.db-drawer-header-text {
				margin-block: auto;
				font-weight: 700;
			}

			.button-close-drawer {
				margin-inline-start: auto;

				// angular-workaround
				button {
					margin-inline-start: auto;
				}
			}

			&:has(.button-close-drawer),
			&:has(:not(.db-drawer-header-text:empty)) {
				display: flex;
			}
		}
	}

	&[open] {
		.db-drawer-container {
			@media screen and (prefers-reduced-motion: no-preference) {
				&:not([data-direction]),
				&[data-direction="right"] {
					animation: show-right-to-left
						#{variables.$db-transition-straight-show};
				}

				&[data-direction="left"] {
					animation: show-left-to-right
						#{variables.$db-transition-straight-show};
				}

				&[data-direction="up"] {
					animation: show-bottom-to-top
						#{variables.$db-transition-straight-show};
				}

				&[data-direction="down"] {
					animation: show-top-to-bottom
						#{variables.$db-transition-straight-show};
				}
			}

			&[hidden] {
				@media screen and (prefers-reduced-motion: no-preference) {
					&:not([data-direction]),
					&[data-direction="right"] {
						animation: hide-right-to-left
							#{variables.$db-transition-straight-hide};
					}

					&[data-direction="left"] {
						animation: hide-left-to-right
							#{variables.$db-transition-straight-hide};
					}

					&[data-direction="up"] {
						animation: hide-bottom-to-top
							#{variables.$db-transition-straight-hide};
					}

					&[data-direction="down"] {
						animation: hide-top-to-bottom
							#{variables.$db-transition-straight-hide};
					}
				}
			}
		}
	}
}