import React, { useEffect, useState } from "react"
import cls from "classnames"
import QRCode from "qrcode.react"
import Icon from "@/components/icon"
import { CustomLink } from "@/components"
import * as styles from "./index.module.scss"

type IProps = {
  url: string
  title: string
  className?: string
}

const ShareBox = ({ url, title, className }: IProps) => {
  const [showQRcode, toggleQRcode] = useState(false)
  const [href, setHref] = useState("")
  const [text, setText] = useState("")
  useEffect(() => {
    setHref(url)
  }, [url])
  useEffect(() => {
    setText(title)
  }, [title])
  return (
    <div className={cls(styles.container, className)}>
      <CustomLink
        linkTo={`https://twitter.com/intent/tweet?url=${encodeURIComponent(
          href
        )}&text=${encodeURIComponent(text)}`}
        className={styles.link}
      >
        <Icon name="twitter" className={cls(styles.icon, styles.twitter)} />
      </CustomLink>
      <CustomLink
        linkTo={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
          href
        )}`}
        className={styles.link}
      >
        <Icon name="linkedin" className={cls(styles.icon, styles.linkedin)} />
      </CustomLink>
      <CustomLink
        linkTo={`https://reddit.com/submit?url=${encodeURIComponent(
          href
        )}&title=${encodeURIComponent(text)}`}
        className={styles.link}
      >
        <Icon name="reddit" className={cls(styles.icon, styles.reddit)} />
      </CustomLink>
      <div className={cls(styles.wechatShare)}>
        <div
          className={cls(
            "dropdown",
            styles.QRcodeBox,
            showQRcode ? "is-active" : null
          )}
          onMouseEnter={() => toggleQRcode(true)}
          onMouseLeave={() => toggleQRcode(false)}
        >
          <div className={"dropdown-trigger"}>
            <div
              aria-haspopup="true"
              aria-controls="qrcode-menu"
              className={styles.trigger}
            >
              <Icon name="wechat" className={cls(styles.icon, styles.wechat)} />
            </div>
          </div>
          <div
            className={cls("dropdown-menu", styles.menu)}
            id="qrcode-menu"
            role="menu"
          >
            {href && (
              <div className={cls("dropdown-content", styles.dropdownContent)}>
                <QRCode value={href} />
                <p>使用微信扫一扫打开</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

export default ShareBox