import _ from "lodash";
import React, { Component } from "react";
import Countdown from "react-countdown-now";
import { connect } from "react-redux";
import { getRenderer } from "./renderer";

class LiveCountdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theDateToUse: false,
      expired: false
    };
    this.handleComplete = this.handleComplete.bind(this);
  }

  handleComplete() {
    const {
      dispatch,
      settings,
      cKey,
      fieldValues,
      updateComponentSettings,
      getComponentSettings
    } = this.props;

    const { actions } = settings;

    if (actions) {
      const doTheseActions = actions.filter(itm => itm.behavior === "click");
      doTheseActions.forEach(action =>
        dispatch({
          ...action,
          settings: { ...settings, cKey, fieldValues },
          updateComponentSettings,
          getComponentSettings
        })
      );
    }
  }

  setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + ";"; // path=/";
  }

  getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == " ") c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  componentDidMount() {
    const { settings } = this.props;

    if (typeof window === "object") {
      let firstVisitDate = this.getCookie("firstVisitDate");
      if (!firstVisitDate) {
        firstVisitDate = Date.now();
        this.setCookie("firstVisitDate", firstVisitDate, 365);
      }

      const days =
        parseInt(_.get(settings, "firstVisitExpiration.days", 0), 10) *
        1000 *
        60 *
        60 *
        24;

      const hours =
        parseInt(_.get(settings, "firstVisitExpiration.hours", 0), 10) *
        1000 *
        60 *
        60;

      const minutes =
        parseInt(_.get(settings, "firstVisitExpiration.minutes", 0), 10) *
        1000 *
        60;

      const theDateToUse =
        settings.countType === "event"
          ? _.get(settings, "eventDate")
          : parseInt(firstVisitDate, 10) + days + hours + minutes;

      // console.log({ firstVisitDate, days, hours, minutes, theDateToUse });

      this.setState(prevState => {
        return {
          theDateToUse,
          expired: Date.now() > theDateToUse
        };
      });
    }
  }

  render() {
    const { settings } = this.props;
    const { theDateToUse, expired } = this.state;

    const marginTop = _.get(settings, "properties.marginTop");
    const justifyContent = _.get(
      settings,
      "properties.justifyContent",
      "normal"
    );

    return (
      <div
        style={{
          display: "flex",
          justifyContent,
          marginTop
        }}
      >
        <Countdown
          date={expired ? Date.now() + 10 : theDateToUse}
          intervalDelay={0}
          precision={expired ? 3 : 0}
          renderer={getRenderer(settings)}
          onComplete={this.handleComplete}
        />
      </div>
    );
  }
}

export default connect()(LiveCountdown);