// @ts-ignore
import { useState, useEffect } from "react"
// import QRCodeComponent from "QRCode"
// import Backdrop from "./QRCode/Backdrop"
// import { AnimatePresence, motion } from "framer-motion"
import { FaShare } from "react-icons/fa/"
import { AiFillStar } from "react-icons/ai"
import toast from "react-hot-toast"
import {accountIconBase64} from "helper/constants/base64"
import { getStarredClans, getStarredPlayers, setStarredClans, setStarredPlayers } from "helper"
import { Properties } from "csstype"
import useIsClient from "hooks/useIsClient"
const AccountIcon = ({ size = "100%", className = "",
  src = "/assets/account.svg", position = "relative",
  share = false,
  shareValue = "",
  star = false,
  starValue = {
    name: "quandle",
    starredAt: 1283471,
    id: "right",
  },
  clan = false,
  QRCodeLegend = undefined }: props) => {
  const [starred, setStarred] = useState(false)
  const isClient = useIsClient()
  useEffect(() => {
    const starredPlayers = getStarredPlayers()
    const starredClans = getStarredClans()
    if (clan) {
      if (starredClans?.length === 0) setStarred(false)
      else {
        let foundClans = starredClans?.find((item) => item.id === starValue.id)
        setStarred(!!foundClans)
      }
    }
    else {
      if (starredPlayers?.length === 0) setStarred(false)
      else {
        let foundPlayers = starredPlayers?.find((item) => item.id === starValue.id)
        setStarred(!!foundPlayers)
      }
    }
  }, [])

  return (
    <div
      className={className + " shadow-2xl rounded-full"}
      style={{
        width: size, height: size,
        position: position
      }}>

      {star &&
        <div className="star" data-starred={starred} onClick={async () => {
          if (clan) {
            if (starred) setStarredClans(getStarredClans()?.filter((player) => player.id !== starValue.id))
            else setStarredClans([...getStarredClans(), starValue])
          } else {
            if (starred) setStarredPlayers(getStarredPlayers()?.filter((player) => player.id !== starValue.id))
            else setStarredPlayers([...getStarredPlayers(), starValue])
          }
          setStarred(!starred)

        }}>
          <span>
            {isClient ? <AiFillStar /> : null}
          </span>
        </div>}
      {share &&
        <div className="share" onClick={async () => {
          let data = {
            title: "Share Brawlhalla Profile",
            text: "Check out this Brawlhalla Profile!",
            url: shareValue
          }
          try {
            await navigator.share(data)
          } catch (e) {
            if (e?.message) {
              if (e.message?.toLowerCase()?.includes("a earlier share had not yet completed")) return toast.error("Your device is still processing the share request.")
              toast.error(e.message)
              return
            } else {
              console.log(e)
              toast.error("Unknown error occurred while sharing.")
            }
          }
        }}>
          <span>
            {isClient ? <FaShare /> : null}
          </span>
        </div>}
      <img
        src={isClient ? (src || "/assets/account.svg") : accountIconBase64}
        alt="Account Icon"
        width={"100%"}
        className="rounded-full z-10"
      />
    </div>
  )
}

interface props {
  size?: string
  className?: string
  src?: string
  position?: Properties["position"]
  star?: boolean
  clan?: boolean
  starValue?: {
    name: string,
    starredAt: number,
    id: number | string
  }
  share?: boolean
  shareValue?: string
  QRCodeLegend?: string
}
export default AccountIcon