<script lang="ts">
  import type { IPost } from '$type/post';
  import type { IForm } from '$type/form';
  import { browser } from '$app/environment';
  import { getLocaleUrl, getRouteByPostType, t } from "$lib/translations";
  import { isTable } from '../../../store';
  import Creator from "$components/blocks/creator/Creator.svelte";

  let subscribeButtonText = 'Connect on';

  if (browser) {
    const urlParams = new URLSearchParams(window.location.search);
    const entries = urlParams.entries();

    for (const entry of entries) {
      localStorage.setItem('param__' + entry[0], entry[1]);
    }
  }

  isTable.subscribe((value) => {
    if (value) {
      subscribeButtonText = 'Connect on';
    } else {
      subscribeButtonText = 'Connect on Telegram';
    }

  })

  export let className: string | undefined = '';

  export let data: IPost;

  const formState: IForm = {
    loading: false,
    error: false,
    data: {
      email: '',
    },
    response: {},
    status: 0,
  };

  const redirectOnTelegram = async () => {
    window.open('https://t.me/quadcode_solutions', '_blank');
  };
</script>

<aside class="aside {className}">
  <Creator data={data} />
</aside>

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

  .aside {
    &__also {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid $techBlue2;

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

    &__alsoTitle {
      font-weight: 500;
      font-size: 11px;
      line-height: 16px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: $techBlueSecondary;
      margin-bottom: 12px;
    }

    &__alsoItems {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    &__alsoItem {
      border-top: none;
      border-left: 2px solid $redPrimary;
      border-radius: 0;
      background: transparent;
      transition: background 0.15s ease;

      &:hover {
        background: $techBlue2;
      }

      > a {
        display: flex;
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 18px;
        color: $fontPrimary;

        @include breakpoint-down('deskS') {
          font-size: 12px;
          line-height: 17px;
          padding: 6px 10px;
        }
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    &__subscribe {
      border-radius: 16px;
      background: linear-gradient(180deg, #eef3f6 0%, #f1f3f4 100%);
      display: flex;
      padding: 24px;
      flex-direction: column;
      gap: 16px;
      position: sticky;
      top: 127px;

      @include breakpoint-down('deskL') {
        top: 118px;
      }

      @include breakpoint-down('tabL') {
        padding: 8px 5px 4px 8px;
        gap: 0;
        border-radius: 8px;
      }

      @include breakpoint-down('tabM') {
        padding: 8px;
      }

    }

    &__subscribeTitle {
      @include baseTitle;

      @include breakpoint-down('tabL') {
        font-weight: 500;
        @include table;
        margin-bottom: 4px;
      }
      @include breakpoint-down('tabM') {
        text-align: center;
        @include H3;

      }

      color: $techBluePrimary;
    }

    &__subscribeText {
      @include smallDefault;

      color: $techBlueSecondary;

      @include breakpoint-down('tabL') {
        @include subtext;
        margin-bottom: 12px;
      }
      @include breakpoint-down('tabM') {
        @include body;
        text-align: center;
      }
    }

    &__subscribeInput {
      @include smallDefault;

      outline: none;
      padding: 14px 24px;
      border-radius: 40px;
      border: 1px solid $techBlueSecondary;
      background: $techWhite;
      width: 100%;

      &::placeholder {
        color: $techBlueSecondary;
      }
    }

    &__subscribeInputError {
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
      color: $redPrimary;
      margin-top: -14px;
    }

    :global(.aside__subscribeButton) {
      font-size: 13px;
      line-height: 160%;
      font-weight: 500;

      border-radius: 40px;
      background: $techBluePrimary;
      color: $techWhite;
      padding: 10px 23px;
      width: 100%;
      cursor: pointer;
      display: flex;
      gap: 10px;

      @include breakpoint-down('tabL') {
        @include subtext;
        padding: 8px 10px;
        font-weight: 500;
      }
      @include breakpoint-down('tabM') {
        @include body
      }
    }
    :global(.aside__subscribeButton img) {
      width: 18px;
      height: 18px;

      @include breakpoint-down('tabL') {
        width: 12px;
        height: 12px;
      }
    }
  }
</style>