@use "sass:map";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;

@import "@twig/scss/jsshop/autocomplete/_autocomplete-fullscreen";

$params: (
   "show_btn-submit": "false",
   "show_btn-clear": "true",

   "form-margin-right": 34px,
   "form-background-color": global.$body-bg-alt,
   "form-border": 0,
   "border-radius": 50px,

   "icon-margin-left": 20px,
   "icon-color": global.$black,

   "input-color": global.$body-color,
   "placeholder-font-size": global.$font-size-base,
   "placeholder-color": global.$text-muted,
   
   "inner-max-width": 980px,

   "wrapper-padding": 20px global.$gap-width 50px,
   "wrapper-background": global.$body-bg,
   "wrapper-border-top": global.$border-width solid global.$border-color,
   "wrapper-box-shadow": global.$box-shadow,

   "responsive-header-height": 40px,
   "search-padding-y": global.$gap-width,
   "search-padding-x": global.$gap-width,

   "btn-close-color": global.$body-color,
   "btn-close-font-size": 14px,
   "btn-close-haf-color": global.$red,
   
   "btn-clear-size": 30px,
   "btn-clear-margin-right": 8px,
   "btn-clear-border-radius": 50%,
   "btn-clear-color": global.$gray-dark,
   "btn-clear-background": global.$gray,
   "btn-clear-haf-color": global.$black,
);

@if global-variable-exists(c-header-searchfullscreen, components) {
   $keys: map.keys(components.$c-header-searchfullscreen);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Header:SearchFullscreen", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-header-searchfullscreen);
}

.#{component("Header:SearchFullscreen", "class")} {
   &.search-active {
      .search-inner {
         display: flex;
      }
   }

   form {
      position: relative;
      display: flex;
      align-items: center;
      background-color: map.get($params, "form-background-color");
      border: map.get($params, "form-border");
      border-radius: map.get($params, "border-radius");

      > svg {
         margin-left: map.get($params, "icon-margin-left");
         color: map.get($params, "icon-color");
      }

      button[type=submit] {
         @if (map.get($params, "show_btn-submit") == "true") {
            height: 100%;
            border-radius: 0 map.get($params, "border-radius") map.get($params, "border-radius") 0;
         }
         @else {
            display: none;
         }
      }
   }

   .form-control {
      border: 0;
      background: transparent;
      height: 100%;
      min-height: unset;
      color: map.get($params, "input-color");

      @include global.placeholder {
         font-size: map.get($params, "placeholder-font-size");
         color: map.get($params, "placeholder-color");
      }
   }

   .search-inner {
      display: none;
      flex-direction: column;
      width: 100%;
      height: 100%;
      margin: 0 auto;

      @include global.custom-scrollbar;
   }

   .responsive-header {
      display: none;
   }

   .btn-clear {
      display: none;
   }

   .btn-close {
      display: none;
   }

   @media screen and (min-width: global.$respsearch-breakpoint + 1) {
      &.search-active {
         .search-wrapper {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 11;
            width: 100%;
            padding: map.get($params, "wrapper-padding");
            background: map.get($params, "wrapper-background");
            border-top: map.get($params, "wrapper-border-top");
            box-shadow: map.get($params, "wrapper-box-shadow");
         }

         .search-inner {
            max-width: map.get($params, "inner-max-width");
         }
      }

      form {
         margin-right: map.get($params, "form-margin-right");
      }

      .btn-close {
         position: absolute;
         top: 50%;
         right: -#{map.get($params, "form-margin-right")};
         transform: translateY(-50%);
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 0;
         color: map.get($params, "btn-close-color");
         font-size: map.get($params, "btn-close-font-size");

         @include global.haf {
            color: map.get($params, "btn-close-haf-color");
         }
      }
   }

   @media screen and (max-width: global.$respsearch-breakpoint) {
      &.search-active {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         overflow-y: auto;
         height: 100%;
         max-height: var(--windowHeight, 100vh);
         transition: max-height global.$transition-speed;
         z-index: 11;
         background: global.$body-bg;
         padding: map.get($params, "search-padding-y") map.get($params, "search-padding-x");

         @include global.custom-scrollbar;

         .#{component("Header:Icon", "class")} {
            display: none;
         }
         
         .search-wrapper {
            position: static;
            border-top: none;
            box-shadow: none;
         }

         .responsive-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: map.get($params, "responsive-header-height");
            padding: 0 0 global.$spacer;

            p {
               margin: 0;
            }

            .btn {
               padding: 0;
            }
         }
      }

      @if (map.get($params, "show_btn-clear") == "true") {
         .btn-clear {
            &.is-active {
               flex: 0 0 map.get($params, "btn-clear-size");
               display: flex;
               justify-content: center;
               align-items: center;
               height: map.get($params, "btn-clear-size");
               margin-right: map.get($params, "btn-clear-margin-right");
               padding: 0;
               border-radius: map.get($params, "btn-clear-border-radius");
               background: map.get($params, "btn-clear-background");
               color: map.get($params, "btn-clear-color");

               @include global.haf {
                  color: map.get($params, "btn-clear-haf-color");
               }
            }
         }
      }
   }
}
