<script lang="ts">
  import { isMobile } from '../../store';
  import Button from '../button/Button.svelte';
  import type { IEvent } from '$type/events';
  import calendlyClick from '$utils/calendlyClick';
  import { t } from '$lib/translations';

  export let data: IEvent;
  export let isPast: boolean;

  let mobile = false;

  const event = { ...data };

  isMobile.subscribe((value) => {
    mobile = value;
  });

  const startDate = new Date(event.startDate);
  const endDate = new Date(event.endDate);

  const startMonthName = startDate.toLocaleString('en', { month: 'long' });
  const endMonthName = endDate.toLocaleString('en', { month: 'long' });
</script>

<div class="card-events">
  {#if !mobile}
    <div class="card-events__header">
      <img src={event.image?.mediumLarge} alt={event.title} class="card-events__image" />
    </div>
  {/if}
  <div class="card-events__body">
    <div class="card-events__body-info">
      {#if isPast}
        <div class="card-events__body-status">{$t('events.Past')}</div>
      {/if}
      <p class="card-events__body-period">{startDate.getDate()}-{endDate.getDate()}</p>
      {#if startMonthName === endMonthName}
        <p class="card-events__body-month">
          {startMonthName}
        </p>
      {:else}
        <p class="card-events__body-month">
          {startMonthName} - {endMonthName}
        </p>
      {/if}

      <p class="card-events__body-country">{event.city}</p>
      <p class="card-events__body-location">{event.location}</p>
      {#if event.tag}
        <div class="card-events__body-tags">
          <p class="card-events__body-tag">{event.tag}</p>
        </div>
      {/if}
    </div>
    {#if mobile}
      <div class="card-events__body-image">
        <img src={event.image?.medium} alt="" />
      </div>
    {/if}
    <div class="card-events__body-content">
      <p class="card-events__body-title">{event.title}</p>
      <p class="card-events__body-text">{event.description}</p>
      {#if event.linkData && !isPast}
        <Button
          ghost={true}
          className="card-events__body-button"
          text={event.linkData.buttonText ?? $t('events.Book a meeting')}
          onClick={() => calendlyClick(event.linkData.link, window?.Calendly)}
        />
      {/if}
    </div>
  </div>
</div>

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

  .card-events {
    user-select: none;
    display: flex;
    align-items: stretch;
    gap: 40px;

    @include breakpoint-down('deskL') {
      gap: 32px;
    }

    @include breakpoint-down('deskS') {
      gap: 20px;
      padding: 24px;
      background: $techWhite;
      border-radius: 8px;
    }

    @include breakpoint-down('tabM') {
      flex-direction: column;
      padding: 40px 16px;
    }

    &__header {
      width: 100%;
      max-width: 440px;
      height: 320px;

      @include breakpoint-down('deskL') {
        max-width: 352px;
      }

      @include breakpoint-down('deskS') {
        max-width: 180px;
        min-width: 180px;
        height: 129px;
      }

      @include breakpoint-down('tabM') {
        display: none;
      }
    }

    &__image {
      overflow: hidden;
      border-radius: 16px;
      object-fit: cover;
      object-position: center;
      height: 100%;
      background: $blog;

      @include breakpoint-down('deskS') {
        border-radius: 8px;
      }
    }

    &__body {
      background: $techWhite;
      border-radius: 16px;
      width: 100%;
      display: flex;

      @include breakpoint-down('deskS') {
        gap: 20px;
        background: transparent;
      }

      @include breakpoint-down('tabM') {
        flex-direction: column;
      }
    }

    &__body-info {
      position: relative;
      width: 100%;
      max-width: 320px;
      min-width: 320px;
      padding: 40px;

      @include breakpoint-down('deskL') {
        max-width: 255px;
        min-width: 255px;
      }

      @include breakpoint-down('deskS') {
        max-width: 147px;
        min-width: 147px;
        padding: 0;
      }
    }

    &__body-status {
      @include xSmallDefault;

      position: absolute;
      top: 40px;
      right: 40px;
      color: $techWhite;
      background: $fontPrimary;
      padding: 4px 17px;
      border-radius: 40px;

      @include breakpoint-down('deskS') {
        display: none;
      }
    }

    &__body-period {
      @include titleM;

      font-family: $Inter;
      color: $redPrimary;

      @include breakpoint-down('deskL') {
        font-size: 24px;
        line-height: 33px;
      }
    }

    &__body-month {
      @include titleM;

      margin-bottom: 32px;

      @include breakpoint-down('deskL') {
        margin-bottom: 24px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 16px;
      }
    }

    &__body-country {
      @include baseTitle;

      margin-bottom: 8px;
    }

    &__body-location {
      @include smallDefault;

      margin-bottom: 32px;

      @include breakpoint-down('deskL') {
        margin-bottom: 24px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 16px;
      }
    }

    &__body-tags {
      display: flex;
      align-items: center;
    }

    &__body-tag {
      @include smallDefault;

      font-weight: 700;
      padding: 4px 16px;
      color: $techBluePrimary;
      background: $techBlue2;
      border-radius: 4px;

      @include breakpoint-down('deskL') {
        font-size: 15px;
        line-height: 21px;
      }

      @include breakpoint-down('deskS') {
        font-size: 12px;
        line-height: 13px;
      }
    }

    &__body-content {
      width: 100%;
      padding: 40px;

      @include breakpoint-down('deskS') {
        padding: 0;
      }
    }

    &__body-title {
      @include titleM;

      margin-bottom: 16px;

      @include breakpoint-down('deskS') {
        margin-bottom: 8px;
      }
    }

    &__body-text {
      @include smallDefault;
    }

    &__body-image {
      display: none;

      @include breakpoint-down('tabM') {
        display: flex;
      }

      img {
        width: 100%;
        max-height: 128px;
        min-height: 128px;
        border-radius: 4px;
        height: 100%;
        object-fit: cover;
        object-position: center;
        background: $blog;
      }
    }

    :global(.card-events__body-button) {
      @include smallCTA;

      margin-top: 40px;

      @include breakpoint-down('deskS') {
        margin-top: 24px;
      }
    }
  }
</style>