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

$params: (
   "list-no-items-padding": global.$gap-width 0,
   "list-items-margin": 0 20px,

   "border-bottom": 0,

   "image-overlay": "true",
   "image-width": 74px,
   "image-border-radius": global.$border-radius-base,
   "image-border": unset,
   "image-padding": 0,
   "flag-discount-display": none,

   "title-color": global.$text-dark,
   "title-font-size": global.$font-size-base,
   "title-font-weight": global.$font-weight-base,
   "title-line-height": global.$line-height-sm,
   "title-max-width": 250px,

   "variation-color": global.$text-muted,
   "variation-font-size": global.$font-size-smaller,
   "variation-font-weight": global.$font-weight-base,

   "price-color": global.$text-dark,
   "price-color-discounted": global.$discount-color,
   "price-font-size": 18px,
   "price-font-weight": global.$font-weight-base,

   "price-original-color": global.$text-muted,
   "price-original-font-size": global.$font-size-base,
   "price-original-font-weight": global.$font-weight-base,

   "loading-image-width": 65px,
   "loading-image-height": 65px,
   "loading-image-size": 50px,
   "loading-image-border-after": 6px solid global.$border-color,

   "delete-color": global.$text-dark,
   "delete-font-size": 19px,

   "buy-count-wrapper-width": 70px,
   "buy-count-width": 40px,
   "buy-count-min-height": 56px,
   "buy-count-border": global.$border-width solid global.$border-color,
   "buy-count-border-radius": global.$border-radius-lg,

   "item-added-margin-bottom": 10px,
   "item-added-color": global.$green,
);

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

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

.cartbox-product-list {
   overflow-y: auto; // nativní scrollbary

   &[data-simplebar] {
      overflow-y: hidden;
      height: calc(100% - 89px - 313px); // header, footer height // todo: cartbox-product-list height vymyslet lépe

      &[data-simplebar="init"] {
         overflow-y: inherit;
      }
   }

   .no-items {
      margin: map.get($params, "list-items-margin");
      padding: map.get($params, "list-no-items-padding");
      color: global.$text-muted;
   }
}

// todo: bacha, ta classa je z části i v header/_header-cartbox.products.scss
.cartbox-product {
   border-bottom: map.get($params, "border-bottom");
   display: flex;
   margin: map.get($params, "list-items-margin");
   padding: 8px 0;
   position: relative;

   .product-image {
      flex-shrink: 0;
      vertical-align: top;
      display: flex;
      align-items: center;
      justify-content: center;
      width: map.get($params, "image-width");
      max-height: map.get($params, "image-width");
      background: map.get($params, "image-background");
      border-radius: map.get($params, "image-border-radius");
      border: map.get($params, "image-border");
      padding: map.get($params, "image-padding");

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

      img {
         max-height: 100%;
         width: auto;
         border-radius: map.get($params, "image-border-radius");
      }
   }

   .product-content {
      flex-grow: 1;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   p {
      font-size: inherit;
      margin: 0;
   }

   .product-title {
      color: map.get($params, "title-color");
      font-size: map.get($params, "title-font-size");
      font-weight: map.get($params, "title-font-weight");
      line-height: map.get($params, "title-line-height");
      max-width: map.get($params, "title-max-width");
      padding-right: 8px;
      padding-left: 20px;

      a {
         @include global.underline-hover;
      }

      span {
         display: block;
         color: map.get($params, "variation-color");
         font-size: map.get($params, "variation-font-size");
         font-weight: map.get($params, "variation-font-weight");
      }

      .item-added-info {
         margin-bottom: map.get($params, "item-added-margin-bottom");
         color: map.get($params, "item-added-color");

         .c-icon {
            vertical-align: middle;
         }
      }
   }

   .price-total {
      display: flex;
      align-items: flex-end;
      margin: 5px 0;

      .flag {
         display: map.get($params, "flag-discount-display");
         margin-right: 10px;
         margin-bottom: 0;
      }

      div {
         display: flex;
         align-items: flex-end;
         flex-direction: row-reverse;

         span,
         strong {
            display: block;
            white-space: nowrap;
            line-height: 1;
         }

         span {
            color: map.get($params, "price-original-color");
            font-size: map.get($params, "price-original-font-size");
            font-weight: map.get($params, "price-original-font-weight");
            text-decoration: line-through;
            margin-left: 10px;

            + strong {
               color: map.get($params, "price-color-discounted");
            }
         }

         strong {
            color: map.get($params, "price-color");
            font-size: map.get($params, "price-font-size");
            font-weight: map.get($params, "price-font-weight");
         }
      }
   }

   .buy-count-wrapper {
      display: flex;
      flex-shrink: 0;
      margin-right: 15px;
      width: map.get($params, "buy-count-wrapper-width");
      border: map.get($params, "buy-count-border");
      border-radius: map.get($params, "buy-count-border-radius");

      .form-control {
         min-height: map.get($params, "buy-count-min-height");
         width: map.get($params, "buy-count-width");
         padding: 0;
         text-align: center;
         border: 0;
         border-radius: map.get($params, "buy-count-border-radius");
      }

      > div {
         display: flex;
         flex-direction: column;
         width: 40%;

         button {
            @include global.btn-reset;
            @include global.delete-before;

            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
         }
      }
   }

   &.product-loading {
      opacity: .5;
      position: relative;

      .product-image {
         position: relative;
         width: map.get($params, "loading-image-width");
         height:  map.get($params, "loading-image-height");
      }

      .product-image::after {
         content: " ";
         display: block;
         font-size: map.get($params, "loading-image-size");
         width: map.get($params, "loading-image-width-after");
         height: map.get($params, "loading-image-height-after");
         margin: auto;
         border-radius: 50%;
         border: map.get($params, "loading-image-border-after");
         border-color: global.$border-color transparent global.$border-color transparent;
         animation: lds-dual-ring 1.2s linear infinite;
         position: absolute;
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
      }

      @keyframes lds-dual-ring {
         0% {
            transform: rotate(0deg);
         }

         100% {
            transform: rotate(360deg);
         }
      }
   }

   .delete-product {
      @include global.btn-reset;
      @include global.delete-before;

      cursor: pointer;
      color:  map.get($params, "delete-color");
      font-size:  map.get($params, "delete-font-size");
      transition: color global.$transition-speed;

      @include global.haf {
         color: global.$state-error;
      }
   }
}
