<script lang="ts">
  import Button from '../button/Button.svelte';
  import arrowSvg from '$assets/header/banner/arrow-right.svg';
  import youtubeSvg from '$assets/header/banner/youtube.svg';
  import CountdownTimer from './CountdownTimer.svelte';
  import { banner } from '../../store.js';
  import type { IBanner } from '$type/banner';
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  let bannerData: IBanner | undefined = undefined;

  banner.subscribe((value) => {
    bannerData = value;
  });

  onMount(() => {
    const unsubscribe = banner.subscribe((value) => {
      if (!browser) return;
      if (value?.enabled) {
        document.body.classList.add('banner');
      } else {
        document.body.classList.remove('banner');
      }
    });

    return () => {
      unsubscribe();
      document.body.classList.remove('banner');
    };
  });
</script>
{#if bannerData && bannerData.enabled}
  <div class="tg-banner">
    <div class="tg-banner__container">
      <div class="tg-banner__wrapper">
        <div class="tg-banner__left">
          <span class="tg-banner__left-label">Webinar</span>
          <img src={youtubeSvg} alt="Webinar" />
        </div>
        <p class="tg-banner__text">{@html bannerData.title}</p>
        <div class="tg-banner__timer"><CountdownTimer time={bannerData.webinarTime} /></div>
        <Button link={bannerData.buttonLink} target="_blank" className="button-white"
          >{bannerData.buttonText}
          <img src={arrowSvg} class="tg-banner__img" alt={bannerData.buttonText} /></Button
        >
      </div>
    </div>
  </div>
{/if}

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/mixins';
  @import 'src/scss/media';

  :global(body.banner) {
    margin-top: 194px;

    @include breakpoint-down('tabL') {
      margin-top: 152px;
    }

    :global(.menu-mobile) {
      top: 152px !important;
    }
  }

  :global(body.newHeader.banner) {
    margin-top: 200px;

    @include breakpoint-down('deskS') {
      margin-top: 195px;
    }

    @include breakpoint-down('tabM') {
      margin-top: 116px;
    }

    :global(.menu-mobile) {
      top: 116px !important;
    }
  }

  .tg-banner {
    height: 61px;
    z-index: 1;
    background: $headerDark;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $techWhite;

    @include breakpoint-down('tabL') {
      height: 60px;
    }

    &__container {
      min-width: 1801px;
      width: 100%;
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: #ffffff;

      @media (max-width: 700px) {
        min-width: 100%;
        padding: 0 20px;
      }
    }

    &__left {
      display: flex;
      border-radius: 10px;
      border: 1px solid #353539;
      background: rgba(255, 255, 255, 0.08);
      padding: 9px 10px;
      justify-content: center;
      align-items: center;
      gap: 5px;
      margin-right: 12px;

      img {
        width: 12px;
        height: 12px;
      }

      @media (max-width: 1440px) {
        padding: 6px 8px;
      }

      @media (max-width: 1366px) {
        gap: 4px;
      }

      @media (max-width: 719px) {
        display: none;
      }
    }

    &__left-label {
      color: #7d8387;
      font-size: 16px;
      font-weight: 400;
      line-height: 0;

      @media (max-width: 1440px) {
        font-size: 12px;
      }

      @media (max-width: 700px) {
        width: 53px;
      }
    }

    &__timer {
      margin-right: 16px;
    }

    &__wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__text {
      font-weight: 600;
      font-size: 16px;
      line-height: 1.2;
      text-wrap: wrap;
      padding-left: 16px;
      padding-right: 12px;
      border-left: 1px solid #353539;
      border-right: 1px solid #353539;
      margin-right: 16px;
      height: 18px;
      display: flex;
      align-items: center;

      @media (max-width: 1440px) {
        font-size: 12px;
        font-weight: 400;
      }

      @media (max-width: 719px) {
        border-left: none;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
        height: auto;
        line-height: 1.2;
        padding-right: 0;
      }

      @media (max-width: 479px) {
        max-width: 150px;
      }

      @media (max-width: 393px) {
        border-right: none;
      }
    }

    &__img {
      width: 14px;
      height: 14px;
      object-fit: cover;
      filter: brightness(0) invert(1);
    }

    :global(.button) {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.2;
      letter-spacing: 0;
      white-space: nowrap;
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
      width: auto;
      padding: 16px 22px;
      height: 35px;
      border-radius: 32px;
      position: static;

      &::before,
      &::after {
        display: none;
      }

      &:before {
        width: 100%;
        height: 100%;
        display: block;
        content: '';
        left: 50%;
        transform: translateX(-50%) !important;
        z-index: 99;
        pointer-events: all;
      }

      @media (max-width: 1440px) {
        font-size: 14px;
        padding: 6px 12px;
      }

      @media (max-width: 1366px) {
        width: 127px;
        height: 36px;
      }

      @media (max-width: 1024px) {
        font-size: 14px;
      }

      @media (max-width: 393px) {
        width: 110px;
        padding-left: 12px;
        padding-right: 12px;
      }
    }
  }
</style>