<script lang="ts">
  import timeRead from '../../../assets/images/post/timeread.svg';
  import calendar from '../../../assets/images/post/calendar.svg';
  import updates from '../../../assets/images/post/updates.svg';
  import views from '../../../assets/images/post/views.svg';

  import type { IPost } from '../../../type/post';
  import { loadEvent } from '../../../store';
  import loadObserver from '../../../utils/loadObserver';

  export let className = '';
  export let data: IPost;

  const createDate = new Date(data.date);
  const modifiedDate = new Date(data.modified);

  const createMonthName = createDate.toLocaleString('en', { month: 'long' });
  const modifiedMonthName = modifiedDate.toLocaleString('en', { month: 'long' });

  const createText = createMonthName + ' ' + createDate.getDate() + ', ' + createDate.getFullYear();
  const modifiedText = modifiedMonthName + ' ' + modifiedDate.getDate() + ', ' + modifiedDate.getFullYear();

  loadEvent.set(false);

  const onload = loadObserver(() => {
    loadEvent.set(true);
  });
</script>

<div class="poster {className}">
  <div class="poster__content">
    {#if data?.imageData?.large}
      <img
        use:onload
        src={data?.imageData.large}
        alt=""
        class="poster__contentBg"
        width="100%"
        height="100%"
        loading="lazy"
      />
    {/if}
    <div class="poster__nameplates">
      {#if data?.tagsData}
        {#each data.tagsData as tag}
          <p class="poster__nameplate">{tag}</p>
        {/each}
      {/if}
    </div>
    <h1 class="poster__title">{data.title.rendered}</h1>
    <div class="poster__wrote">
      <img
        alt="Image Written by: {data.authorData.name}"
        class="poster__wroteImage"
        src={data.authorData.avatar.thumbnail}
      />
      <div class="poster__wroteContent">
        <p class="poster__wroteText">Written by:</p>
        <p class="poster__wroteName">{data.authorData.name}</p>
      </div>
    </div>
  </div>
  <div class="poster__list">
    <div class="poster__listItem">
      <img alt="Time read icon" class="poster__listItemIcon" src={timeRead} />
      <div class="poster__listItemText">
        <span>{data.yoast_head_json.twitter_misc['Est. reading time']}</span>
        <p>read</p>
      </div>
    </div>
    <div class="poster__listItem">
      <img alt="Calendar icon" class="poster__listItemIcon" src={calendar} />
      <div class="poster__listItemText">
        <p>Published:</p>
        <span>{createText}</span>
      </div>
    </div>
    <div class="poster__listItem">
      <img alt="Updates icon" class="poster__listItemIcon" src={updates} />
      <div class="poster__listItemText">
        <p>Updated:</p>
        <span>{modifiedText}</span>
      </div>
    </div>
    <div class="poster__listItem">
      <img alt="Views icon" class="poster__listItemIcon" src={views} />
      <div class="poster__listItemText">
        <span>{data.views || 0}</span>
        <p>views</p>
      </div>
    </div>
  </div>
</div>

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

  .poster {
    &__content {
      position: relative;
      width: 100%;
      background: $postPoster;
      min-height: 400px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 40px 120px;

      @include breakpoint-down('deskL') {
        margin-bottom: 9px;
        padding-left: 96px;
      }

      @include breakpoint-down('deskS') {
        min-height: 320px;
        margin-bottom: 14px;
        padding: 48px 79px 41px;
      }

      @include breakpoint-down('tabM') {
        min-height: 335px;
        margin-bottom: 16px;
        padding: 35px 25px 22px 20px;
      }
    }

    &__contentBg {
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
    }

    &__nameplates {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      margin-bottom: 48px;
      position: relative;
      z-index: 1;
    }

    &__nameplate {
      @include smallDefault;

      padding: 6px 20px;
      border-radius: 40px;
      background: $redPrimary;
      color: $techWhite;
    }

    &__title {
      @include blogTitleH1;

      width: 100%;
      max-width: 920px;
      color: $techWhite;
      margin-bottom: 48px;
      position: relative;
      z-index: 1;

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

      @include breakpoint-down('deskS') {
        max-width: 530px;
        margin-bottom: 39px;
      }

      @include breakpoint-down('tabM') {
        max-width: 290px;
        margin-bottom: 48px;
      }
    }

    &__wrote {
      display: flex;
      align-items: center;
      gap: 15px;
      position: relative;
      z-index: 1;

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

    &__wroteImage {
      width: 49px;
      min-width: 49px;
      height: 49px;
      object-fit: cover;
      object-position: center;
      border-radius: 100%;

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

    &__wroteContent {
      display: flex;
      flex-direction: column;
    }

    &__wroteText {
      @include xSmallDefault;

      color: $fontWhite50;
    }

    &__wroteName {
      @include blogBaseDefault;

      color: $techWhite;
    }

    &__list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 42px;

      @include breakpoint-down('deskL') {
        padding: 0 34px;
      }

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

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        padding: 0;
        row-gap: 4px;
      }
    }

    &__listItem {
      display: flex;
      align-items: center;
      gap: 4px;

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

      @include breakpoint-down('deskS') {
        gap: 2px;
      }

      @include breakpoint-down('tabM') {
        width: calc(100% / 2);
      }

      &:nth-child(1) {
        @include breakpoint-down('deskS') {
          order: 1;
        }
      }

      &:nth-child(2) {
        @include breakpoint-down('deskS') {
          order: 2;
        }

        @include breakpoint-down('tabM') {
          justify-content: flex-end;
        }

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

      &:nth-child(3) {
        @include breakpoint-down('deskS') {
          order: 4;
        }

        @include breakpoint-down('tabM') {
          justify-content: flex-end;
        }

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

      &:nth-child(4) {
        @include breakpoint-down('deskS') {
          order: 3;
        }
      }
    }

    &__listItemIcon {
      width: 24px;
      min-width: 24px;
      height: 24px;
    }

    &__listItemText {
      @include smallDefault;

      color: $techBlueSecondary;

      p {
        display: inline;
      }

      span {
        @include smallCTA;

        display: inline;
        color: $techBluePrimary;
      }
    }
  }
</style>