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 useDeezerPresave from '~/src/hooks/presave/useDeezerPresave';
import { useI18n } from '~/src/lib/i18n';
import ServiceButton from '../../../lib/ServiceButton';

const DeezerPresaveButton = (props: Omit<PresaveButtonProps, 'type'>) => {
  const { t } = useI18n();
  const itemContext = useItemContext();
  const appToast = useAppToast();

  const { item } = itemContext.data;

  const deezerPresave = useDeezerPresave({
    item,

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

  return (
    <ServiceButton
      serviceType={ServiceTypes.DEEZER}
      {...props}
      isLoading={deezerPresave.isLoading}
      onClick={useCallback(() => deezerPresave.start(), [])}
    />
  );
};

export default DeezerPresaveButton;