import { useToolbarCollectionContext } from './ToolbarCollectionContext';

import React from 'react';
import { MessageActionModal } from './ActionModal';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export function DiscardChangesModal() {
  const { translate: t } = useWixPatternsContainer();
  const { pendingQuery } = useToolbarCollectionContext();

  if (pendingQuery == null) {
    return null;
  }

  return (
    <MessageActionModal
      dataHook="discard-changes-modal"
      state={pendingQuery.discardChangesModal}
      title={t('cairo.appliedFilters.discardChanges.title')}
      content={t('cairo.appliedFilters.discardChanges.description')}
      primaryButtonText={t('cairo.appliedFilters.discardChanges.CTA')}
      secondaryButtonText={t('cairo.appliedFilters.applyAndClose.CTA')}
    />
  );
}