<template>
  <div class="relative">
    <t-dropdown
      :show.sync="show"
      toggle-on-focus
      toggle-on-hover
      :hide-on-leave-timeout="0"
      :classes="{
        dropdown:
          'absolute rounded-md shadow-lg dark:border-gray-500 border -top-3 -left-3 z-10 overflow-hidden w-40 bg-white dark:bg-gray-600 transition duration-150 ease-in-out',
      }"
    >
      <button
        slot="button"
        class="relative flex items-center text-gray-500"
        :class="show && 'z-20 text-gray-800 dark:text-gray-200'"
        aria-label="Partager"
        aria-haspopup="true"
      >
        <fa icon="share-alt" class="text-xl mr-2.5" />
        <div>Partager</div>
      </button>

      <div class="mt-11 pt-0.5 pb-1">
        <div class="border-t dark:border-gray-500 pt-1 mx-2"></div>

        <ShareNetwork
          v-for="network in networks"
          :key="network.name"
          :network="network.network"
          :url="$config.site_url + document.path.replace(/^\/pages\//, '/')"
          :title="document.title"
          :description="document.description"
          :quote="document.description"
          :hashtags="$config.social_networks_hashtags"
          :twitter-user="$config.twitter_user"
          :media="media"
          class="
            flex
            items-center
            pl-4
            pr-2
            py-1
            text-gray-600
            hover:text-gray-700 hover:bg-hover-light
            dark:text-gray-200
          "
        >
          <fa :icon="network.icon" :class="network.class" />
          <span class="pl-2">
            {{ network.name }}
          </span>
        </ShareNetwork>
      </div>
    </t-dropdown>
  </div>
</template>

<script>
import { defineComponent, ref } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    document: {
      type: Object,
      required: true,
    },
    media: {
      type: String,
      default: null,
    },
  },
  setup() {
    const show = ref(false)

    return {
      show,
      networks: [
        { network: 'email', name: 'Email', icon: 'envelope', class: 'email' },
        {
          network: 'facebook',
          name: 'Facebook',
          icon: ['fab', 'facebook'],
          class: 'facebook',
        },
        {
          network: 'twitter',
          name: 'Twitter',
          icon: ['fab', 'twitter'],
          class: 'twitter',
        },
        {
          network: 'linkedin',
          name: 'Linkedin',
          icon: ['fab', 'linkedin'],
          class: 'linkedin',
        },
        {
          network: 'reddit',
          name: 'Reddit',
          icon: ['fab', 'reddit'],
          class: 'reddit',
        },
        {
          network: 'skype',
          name: 'Skype',
          icon: ['fab', 'skype'],
          class: 'skype',
        },
        { network: 'sms', name: 'SMS', icon: 'comment', class: 'sms' },
        {
          network: 'telegram',
          name: 'Telegram',
          icon: ['fab', 'telegram'],
          class: 'telegram',
        },
        {
          network: 'whatsapp',
          name: 'Whatsapp',
          icon: ['fab', 'whatsapp'],
          class: 'whatsapp',
        },
      ],
    }
  },
})
</script>

<style scoped>
.email,
.sms {
  color: #444;
}
.twitter {
  color: #1da1f2;
}
.facebook {
  color: #3b5998;
}
.linkedin {
  color: #0077b5;
}
.skype {
  color: #00aff0;
}
.reddit {
  color: #ff4500;
}
.telegram {
  color: #0088cc;
}
.whatsapp {
  color: #43d854;
}
</style>