import React, { useState, useEffect, useCallback } from "react";
import PropTypes from "prop-types";
import { IconButton, Tooltip } from "@material-ui/core";
import { PowerSettingsNew } from "@material-ui/icons";
import { useTranslation } from "react-i18next";
import { useToast } from "../../../hooks";
import { msToMinAndSec } from "../../../utils/time";
import useApi from "../../../api";

const initialState = { on: false };
const defaultPingInterval = 1200000; //20 minutes
const defaultStartingTime = 300000; //5 minutes

const WakeComponent = ({ machine, addLog }) => {
  const [state, setState] = useState(initialState);
  const [trigger, setTrigger] = useState(false);

  const { t } = useTranslation();
  const { success, error } = useToast();
  const api = useApi();

  const pingInterval =
    process.env.REACT_APP_MACHINE_PING_INTERVAL || defaultPingInterval;
  const startingTime =
    process.env.REACT_APP_MACHINE_STARTING_TIME || defaultStartingTime;

  const getCurrentDateTime = useCallback(() => {
    const currentDateTime = Date.now();
    const result = t("DATE_FORMAT", {
      date: { value: currentDateTime, format: "DD-MM-YYYY HH:mm:ss" }
    });
    return result;
  }, [t]);

  const log = useCallback(
    message => addLog(`[${getCurrentDateTime()}] ${message}`),
    [addLog, getCurrentDateTime]
  );

  const wakeMachine = useCallback(async () => {
    await api.wakeMachine(machine.machineId, {
      onCompleted: result => {
        setState(prev => ({ ...prev, on: result.success }));
        log(`[Wake]: Success: ${result.success}. Status: ${result.status}`);
        if (result.success) {
          success(result.status);

          //retrigger
          log(
            `Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(
              startingTime
            )}]`
          );
          setTimeout(() => {
            setTrigger(prev => !prev);
          }, startingTime);
        } else {
          error(result.status);
        }
      }
    });
  }, [log, success, error, startingTime, machine.machineId, api]);

  const pingInLoop = useCallback(async () => {
    await api.pingMachine(machine.machineId, {
      onCompleted: result => {
        setState(prev => ({ ...prev, on: result.success }));
        log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);

        if (result.success) {
          setTimeout(() => {
            setTrigger(prev => !prev);
          }, pingInterval);
        }
      },
      onError: () => {}
    });
  }, [machine, log, pingInterval]); // eslint-disable-line react-hooks/exhaustive-deps
  // if "api" is added in pingInLoop dependencies, the useEffect is triggered in loop

  useEffect(pingInLoop, [trigger, pingInLoop]);

  return (
    <Tooltip title={t(state.on ? "Machine.PoweredOn" : "Machine.Actions.Wake")}>
      <span>
        <IconButton
          id={`machine-${machine.machineId}-wake`}
          size={"small"}
          disabled={state.on}
          onClick={wakeMachine}
          style={state.on ? { color: "#33cc33" } : {}}
        >
          <PowerSettingsNew />
        </IconButton>
      </span>
    </Tooltip>
  );
};

WakeComponent.propTypes = {
  machine: PropTypes.object.isRequired,
  addLog: PropTypes.func.isRequired
};

export default WakeComponent;