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

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

  const getModalTitle = () => {
    const fieldName = modal.value?.fieldName;
    if (modal.value?.archiveEnabled && fieldName) {
      return t('cairo.customFields.archive.modal.title.enabled', {
        selectedField: fieldName,
      });
    }
    return t('cairo.customFields.archive.modal.title');
  };

  const getModalDescription = () => {
    if (modal.value?.archiveEnabled) {
      return t('cairo.customFields.archive.modal.description.enabled');
    }
    return t('cairo.customFields.archive.modal.description');
  };

  return (
    <CustomActionModal
      dataHook="archive-custom-field-modal"
      state={state.modal}
      title={getModalTitle()}
      primaryButtonText={t('cairo.customFields.archive.modal.CTA')}
      secondaryButtonText={t('cairo.customFields.archive.modal.cancel.CTA')}
      content={
        <Text dataHook="archive-custom-field-body">
          {getModalDescription()}
        </Text>
      }
      theme="destructive"
      width="510px"
    />
  );
};

export const ArchiveFieldModal = observer(_ArchiveFieldModal);