import { CopyTwoTone } from "@ant-design/icons";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import {
  FacebookIcon,
  FacebookShareButton,
  FacebookShareCount,
  LinkedinIcon,
  LinkedinShareButton,
  TwitterShareButton,
  WhatsappIcon,
  WhatsappShareButton,
  XIcon
} from "react-share";

const ShareWidget = () => {
  const [shareUrl, setshareUrl] = useState();
  const [title, settitle] = useState("");
  const [copy, setcopy] = useState({ copied: false });
  const router = useRouter();
  useEffect(() => {
    console.log(`${process.env.NEXT_PUBLIC_FRONTEND_URL}${router.asPath}`);
    setshareUrl(`${process.env.NEXT_PUBLIC_FRONTEND_URL}${router.asPath}`);
  }, []);

  return (
    <div className=" d-flex align-items-center justify-content-between">
      <div className="share-social-container">
        <div className="share-social-some-network">
          <FacebookShareButton url={shareUrl} className="share-social-some-network-share-button">
            <FacebookIcon size={32} round />
          </FacebookShareButton>
        </div>
        <div className="share-social-some-network">
          <WhatsappShareButton url={shareUrl} title={title} separator=":: " className="share-social-some-network-share-button">
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
        </div>
        <div className="share-social-some-network">
          <LinkedinShareButton url={shareUrl} className="share-social-some-network-share-button">
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
        </div>
        <div className="share-social-some-network">
          <TwitterShareButton url={shareUrl} title={title} className="share-social-some-network-share-button">
            <XIcon size={32} round />
          </TwitterShareButton>
        </div>
      </div>
      <div>
        <CopyToClipboard text={shareUrl} onCopy={() => setcopy({ copied: true })}>
          <span>
            {!copy.copied && (
              <div style={{ cursor: "pointer" }}>
                <CopyTwoTone /> Copy to clipboard
              </div>
            )}
            {copy.copied ? <span>Copied to clipboard!</span> : null}
          </span>
        </CopyToClipboard>
      </div>
    </div>
  );
};

export default ShareWidget;