import React, { useEffect, useState } from 'react'
import { StyledInput, StyledMessage, StyledModal } from './ShareModal.theme'

import Flex from '../../atoms/Flex'
import Heading from '../../atoms/Heading'
import { IShareModal } from './ShareModal.interface'
import Icon from '../../atoms/Icon'
import Modal from '../Modal'

type mapTypes = {
  [key: string]: string
}

const ShareModal = ({
  siteTitle,
  title,
  label,
  url,
  copyText,
  open,
  onClose,
  ...props
}: IShareModal) => {
  const [copied, setCopied] = useState(false)

  useEffect(() => {
    const timeOut = setTimeout(() => {
      setCopied(false)
    }, 1500)

    return () => clearTimeout(timeOut)
  }, [copied])

  const escapeHtml = (text: string) => {
    if (!text) return ''

    const map: mapTypes = {
      '&': '&',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    }

    return text?.replace(/[&<>"']/g, function (m: string) {
      return map[m]
    })
  }

  const copyToClipboard = (text?: string) => {
    text && navigator.clipboard.writeText(text)
  }

  if (!url) return <></>

  url = url.replace(/([^:]\/)\/+/g, '$1')

  const shareTitle = title && encodeURIComponent(escapeHtml(title))
  const shareUrl = url && encodeURIComponent(url)

  const facebookURL = `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&t=${shareTitle}`
  const twitterURL = `https://twitter.com/intent/tweet?text=${shareTitle}&url=${shareUrl}`
  const linkedInURL = `https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${shareTitle}`
  const whatsappURL = `https://api.whatsapp.com/send?text=${shareUrl}`
  const emailURL = `mailto:?subject=${siteTitle} - ${shareTitle}&body=${shareUrl}`

  return (
    <Modal title={label} open={open} onClose={onClose}>
      <StyledModal {...props}>
        <Flex align={'center'} justify={'space-between'} wrap={'wrap'}>
          <a
            className="social-link"
            aria-label="Facebook"
            href={facebookURL}
            target="_blank"
            rel="noreferrer"
          >
            <div>
              <Icon icon="icon-facebook" />
            </div>
            <Heading
              size={'captions'}
              tag={'span'}
              style={{ marginTop: 'var(--space-3)' }}
            >
              Facebook
            </Heading>
          </a>
          <a
            className="social-link"
            href={twitterURL}
            target="_blank"
            aria-label="Twitter"
            rel="noreferrer"
          >
            <div>
              <Icon icon="icon-twitter" />
            </div>
            <Heading
              size={'captions'}
              tag={'span'}
              style={{ marginTop: 'var(--space-3)' }}
            >
              Twitter
            </Heading>
          </a>
          <a
            className="social-link"
            href={linkedInURL}
            target="_blank"
            aria-label="Linked In"
            rel="noreferrer"
          >
            <div>
              <Icon icon="icon-linkedin" />
            </div>
            <Heading
              size={'captions'}
              tag={'span'}
              style={{ marginTop: 'var(--space-3)' }}
            >
              LinkedIn
            </Heading>
          </a>
          <a
            className="social-link"
            href={whatsappURL}
            target="_blank"
            aria-label="WhatsApp"
            rel="noreferrer"
          >
            <div>
              <Icon icon="icon-whatsapp" />
            </div>
            <Heading
              size={'captions'}
              tag={'span'}
              style={{ marginTop: 'var(--space-3)' }}
            >
              WhatsApp
            </Heading>
          </a>
        </Flex>
        <div style={{ marginTop: 'var(--space-5)' }}>
          <StyledInput
            onClick={() => {
              copyToClipboard(url)
              setCopied(true)
            }}
          >
            <span>{url}</span>
            <Icon icon="icon-link" />
          </StyledInput>
          <StyledMessage
            className={copied ? 'active' : ''}
            style={{ textAlign: 'center' }}
          >
            {copyText}
          </StyledMessage>
        </div>
      </StyledModal>
    </Modal>
  )
}

export default ShareModal