import { Text } from '@wix/design-system';
import React from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MessageActionModal } from '../ActionModal';
import { observer } from 'mobx-react-lite';
import { DeleteFieldModalState } from '@wix/bex-core';
import { Trans } from '../Trans';

export const _DeleteFieldModal = ({
  state,
}: {
  state: DeleteFieldModalState;
}) => {
  const container = useWixPatternsContainer();
  const { translate: t } = container;
  const { modal } = state;

  return (
    <MessageActionModal
      dataHook="archived-items-delete-confirm-modal"
      state={modal}
      skin="destructive"
      title={t('cairo.customFields.delete.modal.title', {
        selectedField: modal.value?.fieldName || '',
      })}
      content={
        <Text>
          <Trans
            i18nKey="cairo.customFields.delete.modal.description"
            values={{
              selectedField: modal.value?.fieldName || '',
            }}
            components={{
              bold: <Text weight="bold" />,
            }}
          />
        </Text>
      }
      primaryButtonText={t('cairo.customFields.delete.modal.delete.CTA')}
      secondaryButtonText={t('cairo.customFields.delete.modal.cancel.CTA')}
    />
  );
};

export const DeleteFieldModal = observer(_DeleteFieldModal);