import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { botType } from "../botType";
import Wizard from "./Wizard";
import { makeStyles } from "@material-ui/core/styles";
import { dismissBot } from "../actionCreators";

const useStyles = makeStyles(theme => ({
  bot: {
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2),
    zIndex: 1
  },
  botPosition: {
    position: "absolute"
  }
}));

const BotsManager = ({ bot, actions }) => {
  const [type, setType] = useState(bot.type);
  const classes = useStyles();

  useEffect(() => {
    if (bot.type) setType(bot.type);
  }, [bot.type]);

  return (
    <div className={classes.botPosition}>
      <div className={classes.bot}>
        {type === botType.wizard && <Wizard dismissBot={actions.dismissBot} />}
      </div>
    </div>
  );
};

BotsManager.propTypes = {
  bot: PropTypes.object.isRequired,
  actions: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    bot: state.bot
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ dismissBot }, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(BotsManager);