import { connect } from 'react-redux';
import { overlayShow, overlayHide } from '../Overlay/reducer';
import Component from './component';
import { modalToggle } from './reducer';

const mapStateToProps = ({ sharedTouchDevice, modal }) => {
  const { isTouchDevice } = sharedTouchDevice;
  const { activeModalIds, activeOverlayModalIds } = modal;

  return {
    isTouchDevice,
    activeModalIds,
    activeOverlayModalIds,
  };
};

const mergeProps = (state, { dispatch }, ownProps) => ({
  ...state,
  ...ownProps,
  onOverlayToggle({ event, id: selectedModalId, hasOverlay, showOverlay }) {
    event.stopPropagation();
    dispatch(modalToggle({ selectedModalId, hasOverlay }));
    hasOverlay && dispatch(showOverlay ? overlayShow() : overlayHide());
  },
});

export default connect(mapStateToProps, undefined, mergeProps)(Component);
