import PatronRoute from "../components/protected-route";
import { useMutateMetadata, useMetadata } from "../profile/hooks/useMetadata";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import VibrateTest from "./vibrate-test";
import { useState, useEffect } from "react";
import { faSpinner, faXmarkCircle, faSave } from "@fortawesome/free-solid-svg-icons";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton"
import 'react-loading-skeleton/dist/skeleton.css';

export default function PatronPerks() {



  
  const { status, data, error, isFetching, isPending } = useMetadata()
  const mutateMetadata = useMutateMetadata()



  const username = `${data?.metadata?.first_name || ''} ${data?.metadata?.last_name || ''}`.trim();
  const { metadata } = data || {};

  const [ isUsernamePublic, setIsUsernamePublic ] = useState(metadata?.isUsernamePublic || false)
  useEffect(() => {
    mutateMetadata.mutate({ isUsernamePublic })
  }, [ isUsernamePublic ])

  

  return (
    <>
      <h2 className="title is-2">Patron Perks</h2>
          <h3 className="title is-3">Website Shoutout</h3>
          <PatronRoute featureName="Website shoutout" requiredUserRole="patron">
            <div className="box">
              <span className="mr-2">Display {(!!username) ? username : <SkeletonTheme baseColor="#000" highlightColor="#000"><Skeleton count={1} enableAnimation={false} width="10em" /></SkeletonTheme>} publicly?</span>
              <input className="mr-2" type="checkbox" checked={isUsernamePublic} onChange={(evt) => setIsUsernamePublic(evt.target.checked)}/> 
              {(mutateMetadata.status === 'success') && <FontAwesomeIcon color="lime" icon={faCheckCircle}></FontAwesomeIcon>}
              {(mutateMetadata.status === 'pending') && <FontAwesomeIcon icon={faSpinner}></FontAwesomeIcon>}
              {(mutateMetadata.status === 'error') && <FontAwesomeIcon color="red" icon={faXmarkCircle}></FontAwesomeIcon>}
            </div>
          </PatronRoute>


          <h3 className="title is-3">Vibrate (test)</h3>
          <VibrateTest></VibrateTest>

    </>
  )
}