import { useCallback } from 'react';

import type { PresaveButtonProps } from '..';

import { ServiceTypes } from '~/lib/types';
import { useItemContext } from '~/src/components/ItemPage/ItemPageContext';
import { useAppToast } from '~/src/components/NextApp/lib/CoreUi';
import useSpotifyPresave from '~/src/hooks/presave/useSpotifyPresave';
import { useI18n } from '~/src/lib/i18n';
import ServiceButton from '../../../lib/ServiceButton';

const SpotifyPresaveButton = ({
  withColoredIcon,
  text,
  margin,
}: Omit<PresaveButtonProps, 'type'>) => {
  const { t } = useI18n();
  const appToast = useAppToast();
  const itemContext = useItemContext();
  const { item } = itemContext.data;

  const onSuccess = useCallback(() => {
    appToast({
      text: t('item.events.presaveSuccess'),
    });
  }, []);

  const spotifyPresave = useSpotifyPresave({
    item,
    onSuccess,
  });

  return (
    <ServiceButton
      margin={margin}
      text={text}
      serviceType={ServiceTypes.SPOTIFY}
      withColoredIcon={withColoredIcon}
      isLoading={spotifyPresave.isLoading}
      onClick={useCallback(() => {
        spotifyPresave.start();
      }, [])}
    />
  );
};

export default SpotifyPresaveButton;