import { useEffect, useRef, useState, useMemo } from 'react';
import Modal from 'react-modal';
import { ShareModal } from 'components/Elements';

import { useQuoteState, useQuoteLoader, useQuoteActions } from './hooks';
import { AuthorInfo, AuthorInfoLegacy } from './components';
import EventBus from 'utils/eventbus';

import './scss/index.scss';

/**
 * Quote component - Displays quotes from various sources
 * Supports: API quotes, custom quotes, quote packs, and offline quotes
 */
export default function Quote() {
  const { quoteData, uiState, updateQuote, toggleShareModal } = useQuoteState();
  const { getQuote } = useQuoteLoader(updateQuote);
  const { copyQuote, toggleFavourite } = useQuoteActions(quoteData);

  const quoteRef = useRef(null);
  const [localIsFavourited, setLocalIsFavourited] = useState(false);
  const [display, setDisplay] = useState('block');
  const [fontSize, setFontSize] = useState(() => {
    const zoomQuote = localStorage.getItem('zoomQuote');
    return `${1.2 * Number((zoomQuote || 100) / 100)}em`;
  });
  const [authorDetails, setAuthorDetails] = useState(localStorage.getItem('authorDetails') === 'true');
  const [isLegacyStyle, setIsLegacyStyle] = useState(localStorage.getItem('widgetStyle') === 'legacy');

  // Compute if current quote is favorited
  const isFavourited = useMemo(() => {
    const favQuote = localStorage.getItem('favouriteQuote');
    return !!favQuote && favQuote === `${quoteData.quote} - ${quoteData.author}`;
  }, [quoteData.quote, quoteData.author]);

  const handleFavourite = () => {
    toggleFavourite();
    setLocalIsFavourited(!localIsFavourited);
  };

  useEffect(() => {
    const handleRefresh = (data) => {
      if (data === 'quote') {
        const quoteSetting = localStorage.getItem('quote');
        const zoomQuote = localStorage.getItem('zoomQuote');
        const authorDetailsSetting = localStorage.getItem('authorDetails');
        const widgetStyle = localStorage.getItem('widgetStyle');

        setDisplay(quoteSetting === 'false' ? 'none' : 'block');
        setFontSize(`${1.2 * Number((zoomQuote || 100) / 100)}em`);
        setAuthorDetails(authorDetailsSetting === 'true');
        setIsLegacyStyle(widgetStyle === 'legacy');
      } else if (data === 'marketplacequoteuninstall' || data === 'quoterefresh') {
        getQuote();
      }
    };

    const shouldRefresh = localStorage.getItem('quotechange') === 'refresh' ||
                         localStorage.getItem('quotechange') === null;

    if (shouldRefresh) {
      getQuote();
      localStorage.setItem('quoteStartTime', Date.now());
    }

    EventBus.on('refresh', handleRefresh);
    return () => {
      EventBus.off('refresh', handleRefresh);
    };
  }, [getQuote]);

  if (quoteData.noQuote) {
    return null;
  }

  return (
    <div className="quotediv" style={{ display, fontSize }}>
      <Modal
        closeTimeoutMS={300}
        isOpen={uiState.shareModal}
        className="Modal mainModal"
        overlayClassName="Overlay"
        ariaHideApp={false}
        onRequestClose={() => toggleShareModal(false)}
      >
        <ShareModal
          data={`${quoteData.quote} - ${quoteData.author}`}
          modalClose={() => toggleShareModal(false)}
        />
      </Modal>

      <span className="quote" ref={quoteRef}>
        {quoteData.quote}
      </span>

      {authorDetails && (
        isLegacyStyle ? (
          <AuthorInfoLegacy
            author={quoteData.author}
            authorlink={quoteData.authorlink}
            onCopy={copyQuote}
            onFavourite={handleFavourite}
            onShare={() => toggleShareModal(true)}
            isFavourited={isFavourited}
          />
        ) : (
          <AuthorInfo
            author={quoteData.author}
            authorOccupation={quoteData.authorOccupation}
            authorlink={quoteData.authorlink}
            authorimg={quoteData.authorimg}
            authorimglicense={quoteData.authorimglicense}
            onCopy={copyQuote}
            onFavourite={handleFavourite}
            onShare={() => toggleShareModal(true)}
            isFavourited={isFavourited}
          />
        )
      )}
    </div>
  );
}

export { Quote };
