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 * as api from "../api";
import { msToMinAndSec } from "../../../utils/time";

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 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 () => {
    const result = await api.wakeMachine(machine.macAddress);
    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.macAddress]);

  useEffect(() => {
    api.pingMachine(machine.iPv4Address || machine.machineName).then(result => {
      setState(prev => ({ ...prev, on: result.success }));
      log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);

      if (result.success) {
        setTimeout(() => {
          setTrigger(prev => !prev);
        }, pingInterval);
      }
    });
  }, [machine, log, pingInterval, trigger]);

  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;