// import { useAuth0 } from "@auth0/auth0-react";
import { Typography } from "@mui/material";
import Tour, { TourStep } from "common/Tour";
import { random } from "lodash";
import moment from "moment";
import { useGlobalState, useSnackbar, useUserAPI } from "providers";
import React, { useEffect, useState } from "react";
import { Step } from "react-joyride";
// import Emoji from "react-emoji-render";

interface Props {
  setDetailTabState?: ( detail: "inventory" | "sensors" | "analytics" | "presets" | "alerts" | "transactions", buttonIndex: number) => void
}

export default function BinTour(props: Props) {
  // const { userID } = useAuth0();
  const {setDetailTabState} = props
  const [{ user }, dispatch] = useGlobalState();
  const userID = user.id()
  const { error } = useSnackbar();
  const [isTourRunning, setIsTourRunning] = useState(true);
  const [joyKey, setJoyKey] = useState(random());
  const userAPI = useUserAPI();

  useEffect(() => {
    if (user.status.finishedBinIntro.length < 1) {
      setIsTourRunning(true);
      setJoyKey(random(1000000));
    }
  }, [user]);

  const endTour = () => {
    setIsTourRunning(false);
    if (user) {
      user.status.finishedBinIntro = moment().toJSON();
      userAPI
        .updateUser(userID, user.protobuf())
        .then(() => dispatch({ key: "user", value: user }))
        .catch((err: any) => error(err));
    }
  };

  const getTourSteps = (): TourStep[] => {
    let steps: TourStep[] = [
      {
        title: (
          <React.Fragment>
            Welcome to Bin Management 🎉
            {/* <Emoji text=" 🎉" /> */}
          </React.Fragment>
        ),
        content: (
          <React.Fragment>
            <Typography variant="subtitle2" gutterBottom>
              {"Hello " + user.name() + " 👋"}
              {/* <Emoji text=" 👋" /> */}
            </Typography>
            <Typography variant="body2" paragraph>
              Looks like this is your first time using our bin management system! Let me show you
              around.
            </Typography>
          </React.Fragment>
        ),
        target: "body",
        placement: "center",
        disableBeacon: true
      },
      {
        title: "Sensors",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              In the bin sensors menu, you can attach components from your devices to the bin. This
              allows you to view component data right from the bin it's attached to, as well as
              other automation features.
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-bin-sensors",
        placement: "bottom",
        disableBeacon: false
      },
      {
        title: "Settings",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              Bin settings lets you rename your bin, and change various bin specifications.
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-bin-settings",
        placement: "bottom",
        disableBeacon: false
      },
      {
        title: "More Options",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              Access this menu if you want to leave the bin, share it, or view the bin's associated
              users and teams.
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-bin-kebab",
        placement: "bottom",
        disableBeacon: false
      },
      {
        title: "View Other Data",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              Use these tabs to view other Bin Details such as inventory levels over time, 
              alerts and interactions for connected components, and data for attached sensors
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-graph-tabs",
        placement: "bottom",
        disableBeacon: false
      },
      {
        title: "Inventory",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              The inventory tab shows your bins inventory level over a specified window as well as the times the bin mode was changed.
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-details",
        placement: "left-start",
        disableBeacon: false,
        onNext: () => {
          if (setDetailTabState) setDetailTabState("sensors", 1)
        }
      },
      {
        title: "Sensors",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              The sensors tab shows readings from attached sensors over time
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-details",
        placement: "left-start",
        disableBeacon: false,
        onNext: () => {
          if (setDetailTabState) setDetailTabState("analytics", 2)
        }
      },
      {
        title: "Analytics",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              The analysis tab shows analytic bin data using attached sensors
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-details",
        placement: "left-start",
        disableBeacon: false,
        onNext: () => {
          if (setDetailTabState) setDetailTabState("alerts", 3)
        }
      },
      {
        title: "Alerts and Interactions",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              The Alerts tab allows you to view or add any new interactions or alerts for connected components 
              and displays recent notifications from those alerts
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-details",
        placement: "left-start",
        disableBeacon: false,
        onNext: () => {
          if (setDetailTabState) setDetailTabState("presets", 4)
        }
      },
      {
        title: "Bin Mode Presets",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              The Presets tab allows you to create custom presets for the interactions for a device when changing bin modes
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-details",
        placement: "left-start",
        disableBeacon: false,
        onNext: () => {
          if (setDetailTabState) setDetailTabState("transactions", 5)
        }
      },
      {
        title: "Bin Transactions",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              The transactions tab allows view any pending transaction when using a hybrid inventory control
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-details",
        placement: "left-start",
        disableBeacon: false,
        onNext: () => {
          if (setDetailTabState) setDetailTabState("inventory", 0)
        }
      },
      {
        title: "Bin Conditions",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              This section will display conditions based on the bin mode
            </Typography>
            <Typography variant="body2" paragraph>
              Storage Mode: simply displays the Storage conditions by itself with the target temperature and moisture set in the bin settings
            </Typography>
            <Typography variant="body2" paragraph>
              Other Modes: will display the interactions for the bins devices that are controlling a fan or heater on the bin as well as the storage conditions
            </Typography>
          </React.Fragment>
        ),
        target: "#tour-conditions",
        placement: "right",
        disableBeacon: false
      },
      {
        title: "Change Mode",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
              Sensors need to be attached to change bin mode.
            </Typography>
            <ul>
              <li>Storage mode: default</li>
              <li>
                Cooldown mode: use fans to hold bin temperature lower  ❆❅
                {/* <Emoji text="  ❆❅" /> */}
              </li>
              <li>
                Drying mode: use heat to dry grain ☀️ (only visible when the target moisture is lower than the starting moisture in the bin settings)
                {/* <Emoji text=" ☀️" /> */}
              </li>
              <li>
                Hydrating mode: use humid air to hydrate grain (only visible when the target moisture is higher than the starting moisture in the bin settings)
              </li>
            </ul>
          </React.Fragment>
        ),
        target: "#tour-bin-mode",
        placement: "bottom",
        disableBeacon: false
      }
    ];
    return steps;
  };

  // if this intro has been done, return null
  if (user.status.finishedBinIntro.length > 1) return null;

  // if the user hasn't done the first intro, return null
  if (user.status.finishedIntro.length < 1) return null;

  return (
    <div key={joyKey}>
      <Tour run={isTourRunning} steps={getTourSteps()} endTourCallback={endTour} />
    </div>
  );
}
