import { LinkIcon } from '@heroicons/react/20/solid'
import { useState } from 'react'
import {
  FacebookShareButton,
  LinkedinShareButton,
  TwitterShareButton,
} from 'react-share'

import { FacebookIcon } from '~/components/icons/facebook'
import { InstagramIcon } from '~/components/icons/instagram'
import { LinkedinIcon } from '~/components/icons/linkedin'
import { XIcon } from '~/components/icons/x'

type SocialShareButtonsProperties = {
  url: string
  title: string
}

export const SocialShareButtons = ({
  url,
  title,
}: SocialShareButtonsProperties) => {
  const [showPopup, setShowPopup] = useState(false)

  const handleCopyLink = () => {
    navigator.clipboard.writeText(url)
    setShowPopup(true)
    setTimeout(() => setShowPopup(false), 2000)
  }

  const handleInstagramShare = () => {
    const instagramUrl = `https://www.instagram.com/direct/new/?text=${encodeURIComponent(title + ' ' + url)}`
    window.open(instagramUrl, '_blank')
  }

  return (
    <div className="flex items-center space-x-2">
      {showPopup && (
        <div className="absolute top-0 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
          Link berhasil disalin!
        </div>
      )}
      <button onClick={handleCopyLink}>
        <LinkIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
      </button>
      <FacebookShareButton
        url={url}
        title={title}
      >
        <FacebookIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
      </FacebookShareButton>

      <LinkedinShareButton
        url={url}
        title={title}
      >
        <LinkedinIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
      </LinkedinShareButton>

      <TwitterShareButton
        url={url}
        title={title}
      >
        <XIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
      </TwitterShareButton>

      <button onClick={handleInstagramShare}>
        <InstagramIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
      </button>
    </div>
  )
}