import { toast } from 'sonner';
import LoadingSpinner from '../../../../../components/LoadingSpinner';
import SingleSelect from '../../../../../components/SingleSelect';
import { useChangeSettingsMutation } from '../../../../../features/settings/settingsApi';

const showBadgeOn = {
  both: 'Both Page',
  list: 'Product List',
  single: 'Single Page',
};

const WhereToShowBadge = ({ isLoading, settings }) => {
  const [changeSettings, { isLoading: updating }] = useChangeSettingsMutation();

  const handleSettingChange = async (value) => {
    const response = await changeSettings({
      show_badge_on: value,
    }).unwrap();
    if (response) {
      toast.success(`Showing badge on ${showBadgeOn[response.show_badge_on]}`);
    }
  };

  return (
    <div className='wmx-flex wmx-items-center wmx-justify-between wmx-pt-2'>
      <div>
        <p className='wmx-text-base wmx-font-semibold'>Show Badge On:</p>
        <p className='wmx-text-gray-500 wmx-text-sm'>Select the pages where the badge will be displayed.</p>
      </div>
      <div className='wmx-flex wmx-items-center wmx-gap-2'>
        <>
          {isLoading ? (
            <div className='wmx-w-44 wmx-h-[34px] wmx-rounded-md wmx-bg-gray-300 wmx-animate-pulse' />
          ) : (
            <>
              {updating ? <LoadingSpinner /> : <div className='w-4' />}
              <SingleSelect
                onChange={(value) => handleSettingChange(value)}
                items={showBadgeOn}
                selected={settings?.show_badge_on}
              />
            </>
          )}
        </>
      </div>
    </div>
  );
};
export default WhereToShowBadge;
