import React, { Component } from 'react';
import { connect } from 'react-redux';
import Joyride, { CallBackProps, STATUS, Step, StoreHelpers } from 'react-joyride';

import { getSteps } from "./Walkthroughs";

import { endWalkthrough } from '../../actions'

export const Walkthrough = ({ walkthrough, endWalkthrough }) => {

  const handleJoyrideCallback = (data) => {
    const { status, type } = data;
    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];

    if (finishedStatuses.includes(status)) {
      endWalkthrough();
    }

    // // tslint:disable:no-console
    // console.groupCollapsed(type);
    // console.log(data);
    // console.groupEnd();
    // // tslint:enable:no-console
  };

  const steps = getSteps(walkthrough.pathname);
  return (
      <Joyride
        steps={steps}
        run={walkthrough.run}
        continuous={true}
        scrollToFirstStep={true}
        showProgress={true}
        showSkipButton={true}
        callback={handleJoyrideCallback}

        floaterProps={{
          styles: {
            wrapper: {
              zIndex: 1000,
            },
          },
        }}
        styles={{
          options: {
            zIndex: 1000,
          }
        }}
    />
  );
};

const mapStateToProps = store => ({
  walkthrough: store.walkthrough,
});

const mapDispatchToProps = dispatch => ({
  endWalkthrough: () => dispatch(endWalkthrough()),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Walkthrough)