import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Text, TextButton } from '@wix/design-system';
import { CustomActionModal, MessageActionModal } from '../ActionModal';
import { CustomFieldForm } from '.';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { CustomFieldModalPrimaryButton } from './CustomFieldModalPrimaryButton';
import { CustomFieldModalState, Translate } from '@wix/bex-core';
import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';

export const _CustomFieldModal = ({
  state,
}: {
  state: CustomFieldModalState;
}) => {
  if (process.env.NODE_ENV !== 'production') {
    // We show form errors in the FormField status messages which were introduced
    // in wix-style-react 10.56.0
    minimalRequiredWdsRuntimeCheck({
      required: '^1.64.1',
      requiredBy: 'WixPatterns/CustomFieldModal',
    });
  }

  const {
    translate: t,
    environment: { language },
  } = useWixPatternsContainer();

  const {
    mode,
    customFieldModalBiReporter: { reportLearnMoreClick, reportModalEndProcess },
  } = state;

  if (mode === 'new' && state.fieldManagement.maxReached) {
    return (
      <MessageActionModal
        state={state.modalState}
        title={t('cairo.customFields.maxLimit.modal.title')}
        primaryButtonText={t('cairo.customFields.maxLimit.modal.cta')}
        content={t('cairo.customFields.maxLimit.modal.description')}
      />
    );
  }

  return (
    <CustomActionModal
      dataHook="custom-field-modal"
      state={state.modalState}
      title={
        mode === 'new'
          ? t('cairo.customFields.addCustomField.modal.title')
          : t('cairo.customFields.editCustomField.modal.title')
      }
      subtitle={
        mode === 'new' && <CustomFieldModalSubtitle t={t} language={language} />
      }
      content={<CustomFieldForm state={state} />}
      primaryButtonText={
        <CustomFieldModalPrimaryButton
          state={state}
          content={
            mode === 'new'
              ? t('cairo.customFields.addCustomField.modal.add.CTA')
              : t('cairo.customFields.editCustomField.save.CTA')
          }
        />
      }
      secondaryButtonText={t(
        'cairo.customFields.addCustomField.modal.cancel.CTA',
      )}
      onCloseButtonClick={() => reportModalEndProcess({ endType: 'Cancel' })}
      secondaryButtonOnClick={() =>
        reportModalEndProcess({ endType: 'Cancel' })
      }
      footnote={
        state.fieldManagement.supportsPii ? null : (
          <Footnote
            language={language}
            reportLearnMoreClick={reportLearnMoreClick}
            t={t}
          />
        )
      }
    />
  );
};

export const CustomFieldModal = observer(_CustomFieldModal);

interface FootnoteProps {
  language: string;
  reportLearnMoreClick: () => void;
  t: Translate;
}

const Footnote: React.FC<FootnoteProps> = ({
  language,
  reportLearnMoreClick,
  t,
}) => {
  return (
    <Text size="small" dataHook="pii-footnote">
      {t('cairo.customFields.addCustomField.modal.PII')}
      &nbsp;
      <a
        href={`https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`}
        target="_blank"
        rel="noreferrer"
        onClick={reportLearnMoreClick}
      >
        {t('cairo.customFields.addCustomField.modal.PII.learnMore')}
      </a>
    </Text>
  );
};

interface CustomFieldModalSubtitleProps {
  t: Translate;
  language: string;
}

const CustomFieldModalSubtitle: React.FC<CustomFieldModalSubtitleProps> = ({
  t,
  language,
}) => {
  return (
    <Box direction="vertical">
      <Text>{t('cairo.customFields.addCustomField.modal.subtitle')}</Text>
      <Text>
        {t('cairo.customFields.addCustomField.modal.subtitle.note')}
        &nbsp;
        <TextButton
          as="a"
          rel="noopener"
          target="_blank"
          href={`https://support.wix.com/${language}/article/about-custom-fields`}
          dataHook="custom-field-modal-subtitle-learnmore"
        >
          {t('cairo.subtitle.learnMore')}
        </TextButton>
      </Text>
    </Box>
  );
};