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

$params: (
   "image-overlay": unset,
   "image-padding": 20px,
   "gap": global.$gap-width,
   "gap-xl": global.$gap-width,
   "margin-bottom": global.$gap-width,
   "border-radius": 0,
   "border": global.$border-width solid global.$border-color,

   "gallery-width": 100%,
   "gallery-width-xl": unset,
   "gallery-margin-right": unset,
   "gallery-template-columns": repeat(6, 1fr),
   "gallery-photo-aspect-ratio": 1,
   "gallery-labels-right": 20px,
   "gallery-labels-top": 20px,
   "gallery-labels-resp": "false",

   "main-photo-flex": 1,
   "main-photo-border": global.$border-width solid global.$border-color,
   "main-photo-border-resp": none,

   "controls-hide-desktop": "true",
   "controls-buttons-size": 42px,
   "controls-buttons-font-size": 26px,
   "controls-buttons-background": global.$body-bg-alt,
   "controls-buttons-border-radius": 50%,
   "controls-buttons-top": 35%,
   "controls-buttons-offset": 0,

   "zoom-icon-position": auto 25px 25px auto,
   "zoom-icon-size": 48px,
   "zoom-icon-rounded": true,
   "zoom-icon-font-size": 18px,
   "zoom-icon-background": global.$body-bg-alt,
   "zoom-icon-border": 0,
   "zoom-icon-hide": "false",
   "zoom-icon-hide-resp": "true",

   "more-photos-flex-direction": column,
   "more-photos-gap": 0,
   "more-photos-padding": unset,
   "more-photos-background": global.$body-bg-alt,
   "more-photos-border": 0,
   "more-photos-icon-size": 22px,
   "more-photos-icon-color": global.$text-dark,
   "more-photos-text-color": global.$text-dark,

   "soldout-opacity": .4,
   "soldout-label-background": global.$body-bg,
   "soldout-label-padding": 15px 30px,
   "soldout-label-border-radius": global.$border-radius-base,
   "soldout-label-color": global.$text-dark,
   "soldout-label-font-size": global.$font-size-larger,
   "soldout-label-font-weight": global.$font-weight-bold,
);

@if global-variable-exists(c-product-gallery-thumbsonleft, components) {
   $keys: map.keys(components.$c-product-gallery-thumbsbottom);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Product:Gallery:ThumbsButtom", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-product-gallery-thumbsbottom);
}

.#{component("Product:Gallery:ThumbsBottom", "class")} {
   position: relative;
   container-type: inline-size;
   gap: map.get($params, "gap");
   width: 100%;
   margin-bottom: map.get($params, "margin-bottom");

   a {
      @if (map.get($params, "image-overlay") == true) {
         @include global.image-overlay(0);
      }

      border: map.get($params, "border");
      border-radius: map.get($params, "border-radius");
      overflow: hidden;
   }

   .main-photo {
      position: relative;
      margin-bottom: map.get($params, "margin-bottom");
      border: none;

      a {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         padding: map.get($params, "image-padding");
         border: map.get($params, "main-photo-border-resp");

         span {
            align-items: center;
            justify-content: center;
            position: absolute;
            inset: map.get($params, "zoom-icon-position");
            width: map.get($params, "zoom-icon-size");
            height: map.get($params, "zoom-icon-size");
            font-size: map.get($params, "zoom-icon-font-size");
            background: map.get($params, "zoom-icon-background");
            color: map.get($params, "zoom-icon-color");
            border: map.get($params, "zoom-icon-border");

            @if (map.get($params, "zoom-icon-rounded")) {
               border-radius: 50%;
            }

            @if ((map.get($params, "zoom-icon-hide-resp") == "true") or (map.get($params, "zoom-icon-hide") == "true")) {
               display: none;
            } @else {
               display: flex;
            }
         }
      }
   }

   @if (map.get($params, "gallery-labels-resp") == "false") {
      .gallery-labels {
         display: none;
      }
   }

   .tns-controls {
      button {
         padding: 0;
         width: map.get($params, "controls-buttons-size");
         height: map.get($params, "controls-buttons-size");
         font-size: map.get($params, "controls-buttons-font-size");
         background: map.get($params, "contols-buttons-background");
         border-radius: map.get($params, "controls-buttons-border-radius");
         transform: translateY(-50%);
         top: map.get($params, "controls-buttons-top");

         &:first-child {
            left: map.get($params, "controls-buttons-offset");
         }

         &:last-child {
            right: map.get($params, "controls-buttons-offset");
         }
      }

      .btn:disabled {
         display: none;
      }
   }

   .gallery-photos {
      width: 100%;
      gap: map.get($params, "gap");
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;

      a {
         width: 100px;
         display: block;
         position: relative;
         aspect-ratio: map.get($params, "gallery-photo-aspect-ratio");
      }

      .active {
         border: 1px solid global.$black;
      }

      .more-photos {
         display: none;

         a {
            aspect-ratio: map.get($params, "gallery-photo-aspect-ratio");
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: map.get($params, "more-photos-flex-direction");
            gap: map.get($params, "more-photos-gap");
            padding: map.get($params, "more-photos-padding");
            color: map.get($params, "more-photos-text-color");
            background: map.get($params, "more-photos-background");
            border: map.get($params, "more-photos-border");

            svg {
               font-size: map.get($params, "more-photos-icon-size");
               color: map.get($params, "more-photos-icon-color");
               margin-bottom: 5px;
            }
         }
      }
   }

   &.soldout {
      .main-photo {
         a {
            opacity: map.get($params, "soldout-opacity");
         }

         .soldout-label {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%);
            background: map.get($params, "soldout-label-background");
            border-radius: map.get($params, "soldout-label-border-radius");
            font-size: map.get($params, "soldout-label-font-size");
            font-weight: map.get($params, "soldout-label-font-weight");
            color: map.get($params, "soldout-label-color");
            padding: map.get($params, "soldout-label-padding");
         }
      }
   }

   @container (inline-size > 500px) {
      @include global.container-query-selector(".main-photo") {

         @include global.container-query-selector("a") {
            border: map.get($params, "main-photo-border");
         }

         @if ((map.get($params, "zoom-icon-hide-resp") == "true") and (map.get($params, "zoom-icon-hide") == "false")) {
            @include global.container-query-selector("a span") {
               display: flex;
            }
         }
      }

      .gallery-labels {
         position: absolute;
         display: flex;
         z-index: 2;
         top: map.get($params, "gallery-labels-top");
         right: map.get($params, "gallery-labels-right");
      }

      @include global.container-query-selector(".gallery-photos") {
         width: 100%;
         gap: map.get($params, "gap");
         display: grid;
         grid-template-columns: map.get($params,"gallery-template-columns");
         overflow-x: auto;
      }

      @if ((map.get($params, "controls-hide-desktop") == "true")) {
         @include global.container-query-selector(".tns-controls") {
            display: none;
         }
      }

      @include global.container-query-selector(".gallery-photos") {
         @include global.container-query-selector("a") {
            width: auto;
         }

         @include global.container-query-selector(".hidden") {
            display: none;
         }

         @include global.container-query-selector(".more-photos") {
            display: block;
         }
      }
   }

   @if not (map.get($params, "gallery-width-xl") == unset) {
      @container (inline-size > 700px) {
         @include global.container-query-selector(".gallery-photos") {
            width: map.get($params, "gallery-width-xl");
         }
      }
   }
}
