import { observer } from 'mobx-react-lite';

import { useStores } from '@/app/(root)/AppProviders';
import Switch from '@/components/switch/Switch';

import { AdvancedSection } from './AdvancedSection';

export const InstrumentalToggle = observer(() => {
  const { createV2 } = useStores();
  return (
    <AdvancedSection
      onClick={() => {
        if (createV2.activeLyricsMode === 'instrumental') {
          createV2.setActiveLyricsMode('auto');
        } else {
          createV2.setActiveLyricsMode('instrumental');
        }
      }}
      title={'Instrumental'}
      active={createV2.activeLyricsMode === 'instrumental'}
      renderRightContent={() => {
        return (
          <Switch
            checked={createV2.activeLyricsMode === 'instrumental'}
            onChange={() => {
              if (createV2.activeLyricsMode === 'instrumental') {
                createV2.setActiveLyricsMode('auto');
                createV2.setActiveLyricsModeTab('auto');
              } else {
                createV2.setActiveLyricsMode('instrumental');
                createV2.setActiveLyricsModeTab('instrumental');
              }
            }}
          />
        );
      }}
    />
  );
});