import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapRadioCard from '@capillarytech/cap-ui-library/CapRadioCard';
import CapInput from '@capillarytech/cap-ui-library/CapInput';
import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapError from '@capillarytech/cap-ui-library/CapError';
import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
import InApp from '../../InApp';
import messages from '../messages';
import { STEPS } from '../constants';
import './inAppWrapperView.scss';
const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);

// Mode selection component that handles the editor type selection UI
const ModeSelectionUI = ({
  isFullMode,
  templateName,
  onTemplateNameChange,
  isTemplateNameEmpty,
  modes,
  inAppEditorType,
  onChange,
  handleEditorTypeSelection,
  templateNamePlaceholder,
}) => (
  <>
    <CapInput
      label={<FormattedMessage {...messages.creativeName} />}
      onChange={onTemplateNameChange}
      value={templateName}
      placeholder={templateNamePlaceholder}
      labelPosition="top"
      size="default"
    />
    <CapRow className="inapp-wrapper__card-container">
      <CapRadioCardWithLabel
        panes={modes}
        onChange={onChange}
        selected={inAppEditorType}
        label={<FormattedMessage {...messages.editorType} />}
      />
    </CapRow>
    {isFullMode && isTemplateNameEmpty && (
      <CapError type="error" className="template-name-error">
        <FormattedMessage {...messages.emptyTemplateName} />
      </CapError>
    )}
    {inAppEditorType && !isTemplateNameEmpty && (
      <CapRow className="next-button-container">
        <CapButton
          onClick={handleEditorTypeSelection}
          disabled={isFullMode && isTemplateNameEmpty}
        >
          <FormattedMessage {...messages.next} />
        </CapButton>
      </CapRow>
    )}
  </>
);

ModeSelectionUI.propTypes = {
  isFullMode: PropTypes.bool,
  templateName: PropTypes.string,
  onTemplateNameChange: PropTypes.func.isRequired,
  isTemplateNameEmpty: PropTypes.bool,
  modes: PropTypes.array.isRequired,
  inAppEditorType: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  handleEditorTypeSelection: PropTypes.func.isRequired,
  templateNamePlaceholder: PropTypes.string.isRequired,
};

// Content creation component that handles the InApp editor UI
const ContentCreationUI = ({
  isShowInAppCreate,
  inAppProps,
}) => (
  <>
    {isShowInAppCreate && (
      <InApp {...inAppProps} />
    )}
  </>
);

ContentCreationUI.propTypes = {
  isShowInAppCreate: PropTypes.bool.isRequired,
  inAppProps: PropTypes.object.isRequired,
};

// Main InAppWrapper presentational component
const InAppWrapperView = ({
  inAppEditorType,
  step,
  isFullMode,
  templateName,
  onTemplateNameChange,
  isTemplateNameEmpty,
  modes,
  onChange,
  isShowInAppCreate,
  inAppProps,
  handleEditorTypeSelection,
  templateNamePlaceholder,
}) => {
  const isShowTemplateSelection = step === STEPS.MODE_SELECTION;

  return (
    <>
      <CapSpin spinning={false}>
        {isShowTemplateSelection ? (
          <ModeSelectionUI
            isFullMode={isFullMode}
            templateName={templateName}
            onTemplateNameChange={onTemplateNameChange}
            isTemplateNameEmpty={isTemplateNameEmpty}
            modes={modes}
            inAppEditorType={inAppEditorType}
            onChange={onChange}
            handleEditorTypeSelection={handleEditorTypeSelection}
            templateNamePlaceholder={templateNamePlaceholder}
          />
        ) : (
          <ContentCreationUI
            isShowInAppCreate={isShowInAppCreate}
            inAppProps={inAppProps}
          />
        )}
      </CapSpin>
    </>
  );
};

InAppWrapperView.propTypes = {
  inAppEditorType: PropTypes.string,
  step: PropTypes.string,
  isFullMode: PropTypes.bool,
  templateName: PropTypes.string,
  onTemplateNameChange: PropTypes.func.isRequired,
  isTemplateNameEmpty: PropTypes.bool,
  modes: PropTypes.array.isRequired,
  onChange: PropTypes.func.isRequired,
  isShowInAppCreate: PropTypes.bool.isRequired,
  inAppProps: PropTypes.object.isRequired,
  handleEditorTypeSelection: PropTypes.func.isRequired,
  templateNamePlaceholder: PropTypes.string.isRequired,
};

export default InAppWrapperView;
