import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
import { LyricsOverride } from '/@/renderer/api/types';
import { Button, NumberInput } from '/@/renderer/components';
import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
import {
  useCurrentSong,
  useLyricsSettings,
  useSettingsStore,
  useSettingsStoreActions,
} from '/@/renderer/store';

interface LyricsActionsProps {
  onRemoveLyric: () => void;
  onSearchOverride: (params: LyricsOverride) => void;
}

export const LyricsActions = ({ onRemoveLyric, onSearchOverride }: LyricsActionsProps) => {
  const currentSong = useCurrentSong();
  const { setSettings } = useSettingsStoreActions();
  const { delayMs } = useLyricsSettings();

  const handleLyricOffset = (e: number) => {
    setSettings({
      lyrics: {
        ...useSettingsStore.getState().lyrics,
        delayMs: e,
      },
    });
  };

  const isActionsDisabled = !currentSong;

  return (
    <>
      <Button
        uppercase
        disabled={isActionsDisabled}
        variant="subtle"
        onClick={() =>
          openLyricSearchModal({
            artist: currentSong?.artistName,
            name: currentSong?.name,
            onSearchOverride,
          })
        }
      >
        Search
      </Button>
      <Button
        aria-label="Decrease lyric offset"
        variant="subtle"
        onClick={() => handleLyricOffset(delayMs - 50)}
      >
        <RiSubtractFill />
      </Button>
      <NumberInput
        aria-label="Lyric offset"
        styles={{ input: { textAlign: 'center' } }}
        value={delayMs || 0}
        width={55}
        onChange={handleLyricOffset}
      />
      <Button
        aria-label="Increase lyric offset"
        variant="subtle"
        onClick={() => handleLyricOffset(delayMs + 50)}
      >
        <RiAddFill />
      </Button>
      <Button
        uppercase
        disabled={isActionsDisabled}
        variant="subtle"
        onClick={onRemoveLyric}
      >
        Clear
      </Button>
    </>
  );
};