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 { fp as _ } from '../../common/utils/fp';
import { CarouselWelcome } from '../components/carousel-welcome';
import reducer, { ACTION } from '../reducer';
import { ACTION as COMMON_ACTION } from '../../common/reducer';
import { makeLoadingSelector, makeStepsSelector } from '../selectors';
import { withErrorBoundary } from '../../common/hoc/with-error-boundary';
import { TWelcomeRootState, TState, TStepsEntity } from '../types';
import { MODULE_NAME } from '../constants';

type TStructured = {
  loading: TState['loading'];
  entity: TStepsEntity;
};

type TConnected = {
  getMarkets: () => void;
  complete: () => void;
} & TStructured;

type TPropsExternal = {};

const mapStateToProps = createStructuredSelector<
  TWelcomeRootState,
  TStructured
>({
  loading: makeLoadingSelector(),
  entity: makeStepsSelector(),
  //†prop
});
const mapDispatchToProps = {
  complete: ACTION.completeOnboarding,
  getMarkets: COMMON_ACTION.getMarkets,
  //†action
};

const Connected: React.FC<TConnected> = props => {
  const { getMarkets, ...rest } = props;
  useEffect(() => {
    getMarkets();
  }, []);
  return <CarouselWelcome {...rest} variant="onboarding" />;
};

export default compose(
  _.hoistStatics(CarouselWelcome),
  withReducer(MODULE_NAME, reducer),
  withErrorBoundary(MODULE_NAME),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Connected) as React.FC<TPropsExternal>;