import React from 'react';
// import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { withReducer } from '../../app/core/with-reducer';
import { withEpics } from '../../app/core/with-epics';
import { fp as _ } from '../../common/utils/fp';
import { WelcomeSurvey } from '../components';
import reducer, { ACTION } from '../reducer';
import * as epics from '../epics';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
// import { withNavigationSync } from '../../common/hoc/with-navigation-sync';
import {
  TRootWelcomeSurvey,
  TUpdate,
  TState,
  TSetVariant,
  TSaveUserResponse,
} from '../types';
import {
  makeStepSelector,
  makeSurveySelector,
  makeVariantSelector,
} from '../selectors';
import { ScreenVariant } from '../constants';
import { useScreenOrientation } from '../../common/hooks/use-screen-orientation';
// import { make___Selector } from '../selectors';

type TPropsExternal = {};
type TStructured = {
  survey: TState['survey'];
  step: TState['step'];
  variant: TState['variant'];
};
type TConnected = TPropsExternal &
  TStructured & {
    saveUserResponse: TSaveUserResponse;
    update: TUpdate;
    setStep: (step: number | null) => void;
    setVariant: TSetVariant;
  };

const mapStateToProps = createStructuredSelector<
  TRootWelcomeSurvey,
  TStructured
>({
  // prop1: makeSelector(),
  survey: makeSurveySelector(),
  step: makeStepSelector(),
  variant: makeVariantSelector(),
  //†prop
});
const mapDispatchToProps = {
  // action1: ACTION.action1,
  saveUserResponse: ACTION.saveUserResponse,
  update: ACTION.update,
  setStep: ACTION.setStep,
  setVariant: ACTION.setVariant,
  //†action
};

const Connected: React.FC<TConnected> = props => {
  const { isLandscape } = useScreenOrientation();
  const { step, variant } = props;

  if (_.isNil(step) || variant !== ScreenVariant.carousel || isLandscape) {
    return null;
  }

  return <WelcomeSurvey {...props} />;
};

export default compose(
  _.hoistStatics(WelcomeSurvey),
  withReducer('welcomeSurvey', reducer),
  withEpics('welcomeSurvey', epics),
  withErrorBoundary('welcomeSurvey'),
  // withNavigationSync,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<TPropsExternal>;