import React from "react";
import PropTypes from "prop-types";
import ChatBot from "react-simple-chatbot";
import { ThemeProvider } from "styled-components";
import { useTheme } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";

const Wizard = ({ dismissBot }) => {
  const theme = useTheme();
  const { t } = useTranslation();

  const botTheme = {
    background: "#f5f8fb",
    fontFamily: "monospace",
    headerBgColor: theme.palette.primary.main,
    headerFontColor: "#fff",
    headerFontSize: "16px",
    botBubbleColor: theme.palette.primary.main,
    botFontColor: "#fff",
    userBubbleColor: "#fff",
    userFontColor: "#4a4a4a"
  };

  const steps = [
    {
      id: "1",
      message: t("Chatbot.Wizard.Message1"),
      trigger: "2"
    },
    {
      id: "2",
      message: t("Chatbot.Wizard.Message2"),
      trigger: "3"
    },
    {
      id: "3",
      message: t("Chatbot.Wizard.Message3"),
      trigger: "4"
    },
    {
      id: "4",
      user: true,
      trigger: "5"
    },
    {
      id: "5",
      message: t("Chatbot.Wizard.Message5"),
      trigger: "6"
    },
    {
      id: "6",
      user: true,
      trigger: "7"
    },
    {
      id: "7",
      message: t("Chatbot.Wizard.Message7"),
      trigger: "8"
    },
    {
      id: "8",
      user: true,
      trigger: "9"
    },
    {
      id: "9",
      message: t("Chatbot.Wizard.Message9"),
      end: true
    }
  ];

  const handleEnd = () => {
    setTimeout(dismissBot, 3000);
  };

  const getAvatar = () => {
    const basePath = "public/icons/wizard.png";
    if (process.env.PUBLIC_URL) {
      return `${process.env.PUBLIC_URL}/${basePath}`;
    } else {
      return basePath;
    }
  };

  return (
    <ThemeProvider theme={botTheme}>
      <ChatBot
        handleEnd={handleEnd}
        steps={steps}
        botAvatar={getAvatar()}
        headerTitle="Zirhan"
      />
    </ThemeProvider>
  );
};

Wizard.propTypes = {
  dismissBot: PropTypes.func.isRequired
};

export default Wizard;