index.tsx

import React, { useState } from 'react';

import { useSelector } from 'react-redux';

import PinVerseAction from '../PinVerseAction';
import TranslationFeedbackAction from '../TranslationFeedback/TranslationFeedbackAction';
import VerseActionAdvancedCopy from '../VerseActionAdvancedCopy';
import VerseActionEmbedWidget from '../VerseActionEmbedWidget';
import VerseActionRepeatAudio from '../VerseActionRepeatAudio';
import VerseActionSettings from '../VerseActionSettings';
import VerseActionTranslationsSettings from '../VerseActionTranslationsSettings';

import ShareVerseActionsMenu from './ShareVerseActionsMenu';

import VerseActionsMenuType from '@/components/QuranReader/ReadingView/WordActionsMenu/types';
import WordByWordVerseAction from '@/components/QuranReader/ReadingView/WordByWordVerseAction';
import { selectStudyModeIsOpen } from '@/redux/slices/QuranReader/studyMode';
import Verse from 'types/Verse';

interface Props {
  verse: Verse;
  isTranslationView: boolean;
  onActionTriggered?: () => void;
  isInsideStudyMode?: boolean;
}

const OverflowVerseActionsMenuBody: React.FC<Props> = ({
  verse,
  isTranslationView,
  onActionTriggered,
  isInsideStudyMode = false,
}) => {
  const [selectedMenu, setSelectedMenu] = useState<VerseActionsMenuType>(VerseActionsMenuType.Main);
  const isStudyModeOpen = useSelector(selectStudyModeIsOpen);

  return selectedMenu === VerseActionsMenuType.Main ? (
    <div>
      <PinVerseAction
        verse={verse}
        isTranslationView={isTranslationView}
        onActionTriggered={onActionTriggered}
      />
      <VerseActionAdvancedCopy
        onActionTriggered={onActionTriggered}
        verse={verse}
        isTranslationView={isTranslationView}
        isInsideStudyMode={isInsideStudyMode}
      />
      {!isStudyModeOpen && (
        <WordByWordVerseAction verse={verse} onActionTriggered={onActionTriggered} />
      )}
      {!isStudyModeOpen && (
        <VerseActionRepeatAudio isTranslationView={isTranslationView} verseKey={verse.verseKey} />
      )}
      <VerseActionTranslationsSettings onActionTriggered={onActionTriggered} />
      <TranslationFeedbackAction
        verse={verse}
        isTranslationView={isTranslationView}
        onActionTriggered={onActionTriggered}
        isInsideStudyMode={isInsideStudyMode}
      />
      <VerseActionEmbedWidget
        verse={verse}
        isTranslationView={isTranslationView}
        onActionTriggered={onActionTriggered}
      />
      <VerseActionSettings onActionTriggered={onActionTriggered} />
    </div>
  ) : (
    <ShareVerseActionsMenu
      onActionTriggered={onActionTriggered}
      verse={verse}
      isTranslationView={isTranslationView}
      setSelectedMenu={setSelectedMenu}
    />
  );
};

export default OverflowVerseActionsMenuBody;