import { iconSrc, LinkType } from '../../Link';
import styles from '../Author.module.scss';
import {
  FacebookShareButton,
  FacebookIcon,
  LinkedinShareButton,
  LinkedinIcon,
  TwitterShareButton,
  TwitterIcon,
  WhatsappShareButton,
} from 'react-share';
import { motion, useAnimation } from 'framer-motion';
import { useEffect, useState } from 'react';

const containerVariants = {
  hide: {
    transition: {
      staggerChildren: 0.114,
      staggerDirection: 1,
    },
  },
  show: (delay: boolean) => ({
    transition: {
      staggerChildren: 0.114,
      delayChildren: delay ? 1 : 0,
    },
  }),
};

const variants = {
  hide: {
    y: '100%',
  },
  show: {
    y: '0%',
    transition: {
      duration: 0.35,
      ease: [0.09, 0.6, 0, 1],
    },
  },
};

const btnVariants = {
  hide: {
    opacity: 0,
  },
  show: {
    opacity: 1,
    transition: {
      delay: 0.3,
      duration: 0.45,
      ease: [0.09, 0.6, 0, 1],
    },
  },
};

const ShareButton = () => {
  const controls = useAnimation();
  const [animState, setAnimState] = useState('hide');
  const elTitle = process.browser
    ? document?.querySelector('[property="og:title"]')
    : null;
  /* const elDescription = document.querySelector('[name="description"]') */
  const title = `${elTitle?.getAttribute('content')}`;
  const hide = async () => {
    setAnimState('hide');
    await controls.start('hide');
    controls.set({
      visibility: 'hidden',
    });
    window.removeEventListener('click', hide);
  };

  const onClick = async () => {
    if (animState !== 'show') {
      controls.set({
        visibility: 'visible',
      });
      setAnimState('show');
      await controls.start('show');
      window.addEventListener('click', hide);
    } else {
      hide();
    }
  };

  useEffect(() => {
    controls.set({
      visibility: 'hidden',
    });
  }, []);

  return (
    <div className={styles.container}>
      <motion.button
        className={styles.btn}
        onClick={onClick}
        variants={btnVariants}
        animate={animState === 'hide' ? 'show' : 'hide'}
      >
        <span>Share</span>
        <span>
          <svg>
            <use href={iconSrc[LinkType.SHARE_ICON]}></use>
          </svg>
        </span>
      </motion.button>
      <motion.div
        className={styles.socialButtons}
        variants={containerVariants}
        initial="hide"
        animate={controls}
      >
        <div>
          <motion.div variants={variants}>
            <FacebookShareButton
              quote={process.browser ? title : ''}
              hashtag="#"
              url={process.browser ? window.location.href : ''}
            >
              <FacebookIcon round />
            </FacebookShareButton>
          </motion.div>
          <motion.div variants={variants}>
            <LinkedinShareButton
              title={process.browser ? title : ''}
              url={process.browser ? window.location.href : ''}
            >
              <LinkedinIcon round />
            </LinkedinShareButton>
          </motion.div>
          <motion.div variants={variants}>
            <TwitterShareButton
              title={process.browser ? title : ''}
              url={process.browser ? window.location.href : ''}
            >
              <TwitterIcon round />
            </TwitterShareButton>
          </motion.div>
        </div>
      </motion.div>
    </div>
  );
};

export default ShareButton;