@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Overlay.scss" as *;

@mixin cx-window(
   $name: "window",
   $state-style-map: $cx-window-state-style-map,
   $header-state-style-map: $cx-window-header-state-style-map,
   $body-state-style-map: $cx-window-body-state-style-map,
   $footer-state-style-map: $cx-window-footer-state-style-map,
   $mods: $cx-window-mods,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);
   $mod: map.get($besm, mod);

   .#{$block}#{$name} {
      @include cxb-overlay($name, $besm);
      display: flex;
      flex-direction: column;

      @include cx-add-state-rules($state-style-map, default);

      &.#{$state}resizable {
         &.#{$state}active {
            @include cx-add-state-rules($state-style-map, resizable);
         }
      }
   }

   .#{$element}#{$name}-header {
      position: relative; //put on top of modal backdrop
      box-sizing: border-box;
      display: flex;
      flex: none;
      touch-action: none;

      @include cx-add-state-rules($header-state-style-map, default);

      .#{$state}draggable & {
         cursor: pointer;
      }

      .#{$state}active & {
         @include cx-add-state-rules($header-state-style-map, active);
      }
   }

   .#{$element}#{$name}-footer {
      position: relative;
      box-sizing: border-box;
      flex: none;

      @include cx-add-state-rules($footer-state-style-map, default);

      //TODO: Extract common autoclear
      &:after {
         clear: both;
         visibility: hidden;
         display: block;
         font-size: 0;
         content: " ";
         height: 0;
      }
   }

   .#{$element}#{$name}-body {
      overflow: auto;
      position: relative; //put on top of modal backdrop
      box-sizing: border-box;
      flex: auto;

      $padding: cx-get-state-rule($body-state-style-map, default, "padding");

      $noPad: cx-deep-map-merge(
         $body-state-style-map,
         (
            default: (
               padding: null,
            ),
         )
      );

      @include cx-add-state-rules($noPad, default);

      &.#{$state}pad {
         padding: $padding;
      }
   }

   @each $modname, $config in $mods {
      .#{$block}#{$name}.#{$mod}#{$modname} {
         @include cx-add-state-rules($config, frame);

         .#{$element}#{$name}-body {
            @include cx-add-state-rules($config, body);
         }
         .#{$element}#{$name}-footer {
            @include cx-add-state-rules($config, footer);
         }
      }
   }

   .#{$element}#{$name}-modal-backdrop {
      @include cxe-overlay-modal-backdrop;
   }

   .#{$element}#{$name}-shadow {
      @include cxe-overlay-shadow;
   }

   .#{$element}#{$name}-beacon {
      @include cxe-overlay-beacon;
   }
}

@if (cx-should-include("cx/widgets/Window")) {
   @include cx-window();
}