<script lang="ts">
  import linkedIn from '../../assets/images/social/linkedin.svg';
  import facebook from '../../assets/images/social/facebook.svg';
  import twitter from '../../assets/images/social/twitter.svg';
  import Copy from '../../assets/icons/Copy.svelte';
  import Cross from '../../assets/icons/Cross.svelte';
  import Tick from '../../assets/icons/Tick.svelte';
  import clickOutside from '$utils/outsideClick';
  import { onMount } from 'svelte';
  import { t } from "$lib/translations";

  export let className = '';
  export let text = 'Share';
  export let title: string;
  export let description: string;
  let shareBox: HTMLElement;
  let shareContainer: HTMLElement;
  let state = 'idle'

  const share = (type: string) => {
    let url = '';
    const pageUrl = window.location.href;
    switch(type) {
      case 'linkedIn':
        url = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURI(pageUrl);
        break;
      case 'theX':
        url = 'http://x.com/share?url=' + encodeURI(pageUrl);
        break;
      case 'facebook':
        url = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURI(pageUrl);
        break;
    }

    if (url !== '') {
      const strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
      window.open(url, '_blank', strWindowFeatures);
      shareBox.classList.remove('hidden');
      return;
    }

    if (type === 'copy') {
      try {
        navigator.clipboard.writeText(pageUrl);
        state = 'copied';
        setTimeout(() => {
          state = 'idle';
        }, 1000);
      } catch (e) {
        state = 'error';
        setTimeout(() => {
          state = 'idle';
        }, 1000);
      }
    }
  }

  const onClick = async () => {
    const shareData = {
      title: title,
      text: description,
      url: window.location.href,
    };

    if (typeof navigator.share === 'function') {
      await navigator.share(shareData);
    } else {
      shareBox.classList.toggle('hidden');
    }
  };


  onMount(() => {
    clickOutside(shareContainer, () => {
      shareBox.classList.add('hidden');
    })
  })
</script>

<div class="shareContainer" bind:this={shareContainer}>
  <div
    class={`shareButton ${className}`}
    on:click={onClick}
    on:keydown={() => false}
    tabindex="0"
    role="button"
    >
      <div class="shareButton__text">
        {$t(text)}
      </div>
      <div class="shareButton__icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.5 10V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V10M13.3333 5.83333L10 2.5M10 2.5L6.66667 5.83333M10 2.5V12.5" stroke="#FF3737" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
  </div>
  <div class="contextPanel hidden" bind:this={shareBox}>
    <button class="share-button" on:click={() => share('linkedIn')}>
      <img alt="linkedin" height="100%" loading="lazy" src={linkedIn} width="100%"> LinkedIn
    </button>
    <button class="share-button" on:click={() => share('facebook')}>
      <img alt="facebook" height="100%" loading="lazy" src={facebook} width="100%"> Facebook
    </button>
    <button class="share-button" on:click={() => share('theX')}>
      <img alt="the X" height="100%" loading="lazy" src={twitter} width="100%"> The X
    </button>
    <hr />
    <button class="share-button" on:click={() => share('copy')}>
      {#if state === 'idle'}
        <Copy /> Copy link
      {/if}
      {#if state === 'copied'}
        <Tick /> Link copied
      {/if}
      {#if state === 'error'}
        <Cross /> Error
      {/if}
    </button>
  </div>
</div>



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

  .shareContainer {
    position: relative;
  }

  .contextPanel {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 2px;
    margin-top: 10px;

    position: absolute;
    z-index: 10;
    width: 156px;
    height: 177px;

    background: #FFFFFF;
    border: 1px solid #EAE9E9;
    box-shadow: 0 2px 16px -4px rgba(45, 42, 44, 0.05), 0px 4px 6px -2px rgba(45, 42, 44, 0.03);
    border-radius: 16px;

    &.hidden {
      display: none;
    }

    .share-button {
      border: none;
      background: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 8px;
      gap: 8px;

      font-size: 16px;
      line-height: 20px;

      width: 132px;
      height: 36px;

      flex: none;
      flex-grow: 0;

      cursor: pointer;

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


    }

    hr {
      width: 100%;
      height: 1px;
      background: #EAE9E9;
      border: 0;

      display: flex;

      flex: none;
      align-self: stretch;
      flex-grow: 0;

    }
  }
  .shareButton {
    display: flex;
    gap: 8px;
    padding: 4px 32px;
    justify-content: center;
    align-items: center;
    border: thin solid #EAE9E9;
    background: #FFFFFF;
    border-radius: 40px;
    color: #373437;
    cursor: pointer;

    @include breakpoint-down('deskS') {
      padding: 4px 31px;
    }

    @include breakpoint-down('tabM') {
      width: 100%;
      transform: none;
      padding: 7px 32px;
    }

    &__text {
      font-weight: 400;
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0;

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

    &__icon {
      display: flex;
      width: 20px;
      height: 20px;
    }

    &.asRow {
      border: none;
      background-color: none;

      @include breakpoint-down('tabM') {
        border: thin solid $techBluePrimary;
      }
    }
    &.min {
      @include smallDefault;
      padding: 8px 14px 8px 16px;
      color: $techBluePrimary;
    }

    &:hover {
      background: $techBlue2;
    }

    &::after,
    &::before {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border: 4px solid transparent;
      border-radius: 50%;
      animation: spinner 1s ease infinite;
      opacity: 0;
      pointer-events: none;
    }

    &::after {
      border-top-color: $techWhite;
    }

    &::before {
      border-bottom-color: $techWhite;
    }

  }
</style>