/*
 *
 * InAppWrapper
 *
 */
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';
import { bindActionCreators } from 'redux';
import { createStructuredSelector } from 'reselect';
import withCreatives from '../../hoc/withCreatives';
import useInAppWrapper from './hooks/useInAppWrapper';
import InAppWrapperView from './components/InAppWrapperView';
import messages from './messages';
import * as inAppActions from '../InApp/actions';
const InAppWrapper = (props) => {
  // Destructure props for clarity before passing to hook
  const {
    intl,
    inAppEditorType,
    step,
    isFullMode,
    onInAppEditorTypeChange,
    showNextStep,
    onResetStep,
    setIsLoadingContent,
    isGetFormData,
    getFormdata,
    type,
    cap,
    showTemplateName,
    showLiquidErrorInFooter,
    onValidationFail,
    forwardedTags,
    selectedOfferDetails,
    onPreviewContentClicked,
    onTestContentClicked,
    eventContextTags,
    onCreateComplete,
    handleClose,
    templateData,
    getDefaultTags,
    onEnterTemplateName,
    onRemoveTemplateName,
  } = props;

  // Pass destructured props to the custom hook
  const {
    templateName,
    isTemplateNameEmpty,
    selectedEditorType,
    modes,
    isShowInAppCreate,
    inAppProps,
    onTemplateNameChange,
    onChange,
    handleEditorTypeSelection,
  } = useInAppWrapper({
    intl,
    onInAppEditorTypeChange,
    inAppEditorType,
    step,
    showNextStep,
    onResetStep,
    onEnterTemplateName,
    onRemoveTemplateName,
    setIsLoadingContent,
    isGetFormData,
    getFormdata,
    type,
    isFullMode,
    cap,
    showTemplateName,
    showLiquidErrorInFooter,
    onValidationFail,
    forwardedTags,
    selectedOfferDetails,
    onPreviewContentClicked,
    onTestContentClicked,
    eventContextTags,
    onCreateComplete,
    handleClose,
    templateData,
    getDefaultTags,
  });

  // Render using the presentation component with data from the hook
  return (
    <InAppWrapperView
      inAppEditorType={inAppEditorType}
      step={step}
      isFullMode={isFullMode}
      templateName={templateName}
      onTemplateNameChange={onTemplateNameChange}
      isTemplateNameEmpty={isTemplateNameEmpty}
      modes={modes}
      onChange={onChange}
      isShowInAppCreate={isShowInAppCreate}
      inAppProps={inAppProps}
      handleEditorTypeSelection={handleEditorTypeSelection}
      templateNamePlaceholder={intl.formatMessage(messages.templateNamePlaceholder)}
    />
  );
};

InAppWrapper.propTypes = {
  onInAppEditorTypeChange: PropTypes.func.isRequired,
  isGetFormData: PropTypes.bool,
  type: PropTypes.string,
  inAppEditorType: PropTypes.string,
  step: PropTypes.string,
  showNextStep: PropTypes.func,
  getFormdata: PropTypes.func,
  intl: intlShape,
  cap: PropTypes.object,
  onResetStep: PropTypes.func,
  isFullMode: PropTypes.bool,
  setIsLoadingContent: PropTypes.func,
  showTemplateName: PropTypes.func,
  showLiquidErrorInFooter: PropTypes.func,
  onValidationFail: PropTypes.func,
  forwardedTags: PropTypes.object,
  selectedOfferDetails: PropTypes.array,
  onPreviewContentClicked: PropTypes.func,
  onTestContentClicked: PropTypes.func,
  eventContextTags: PropTypes.array,
  onCreateComplete: PropTypes.func,
  handleClose: PropTypes.func,
  templateData: PropTypes.object,
  getDefaultTags: PropTypes.string,
  onEnterTemplateName: PropTypes.func,
  onRemoveTemplateName: PropTypes.func,
};

const mapStateToProps = createStructuredSelector({
  // Add selectors here if needed
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(inAppActions, dispatch),
});

export default withCreatives({
  WrappedComponent: injectIntl(InAppWrapper),
  mapStateToProps,
  mapDispatchToProps,
  userAuth: true,
});
