import * as React from "react";

import "./index.css";
import * as classNames from "classnames";
import { FormattedMessage } from "react-intl";

let moment = require("moment");
// let Clock = require('../../Utils/flip-down/flip-down');

const AnimatedCard = ({ animation, digit }: any) => {
  return (
    <div className={`flipCard ${animation}`}>
      <span>{digit}</span>
    </div>
  );
};

const StaticCard = ({ position, digit }: any) => {
  return (
    <div className={position}>
      <span>{digit}</span>
    </div>
  );
};
const FlipUnitContainer = ({ digit, shuffle, unit, label }: any) => {
  // assign digit values
  let currentDigit: any = digit;
  let previousDigit: any;
  if (currentDigit < 0) {
    previousDigit = digit + 1;
  } else {
    previousDigit = digit + 1;
  }

  // to prevent a negative value
  if (unit !== "hours") {
    previousDigit = previousDigit === -1 ? 59 : previousDigit;
  } else {
    previousDigit = previousDigit === -1 ? 23 : previousDigit;
  }

  // add zero
  if (currentDigit < 10 && currentDigit > -1) {
    currentDigit = `0${currentDigit}`;
  } else if (currentDigit < 0 && currentDigit > -10) {
    currentDigit = currentDigit.toString().replace("-", "");
    currentDigit = `-0${currentDigit}`;
  }
  if (previousDigit < 10 && previousDigit > -10) {
    previousDigit = `0${previousDigit}`;
  } else if (previousDigit < 0 && previousDigit > -10) {
    previousDigit = previousDigit.toString().replace("-", "");
    previousDigit = `-0${previousDigit}`;
  }

  // shuffle digits
  const digit1 = shuffle ? previousDigit : currentDigit;
  const digit2 = !shuffle ? previousDigit : currentDigit;

  // shuffle animations
  const animation1 = shuffle ? "fold" : "unfold";
  const animation2 = !shuffle ? "fold" : "unfold";

  return (
    <div >
      <span className="counter-label"><FormattedMessage id={label} /></span>
      <div className="flipUnitContainer">
        <StaticCard position={"upperCard"} digit={currentDigit} />
        <StaticCard position={"lowerCard"} digit={previousDigit} />
        <AnimatedCard digit={digit1} animation={animation1} />
        <AnimatedCard digit={digit2} animation={animation2} />
      </div>
    </div>
  );
};

class CountDown extends React.Component<any, any> {
  private timerID: any;
  // private  countMoment = new moment();
  constructor(props: any) {
    super(props);
    this.state = {
      days: 0,
      daysShuffle: true,
      hours: 0,
      hoursShuffle: true,
      minutes: 0,
      minutesShuffle: true,
      seconds: 0,
      secondsShuffle: true
    };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.updateTime(), 50);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  updateTime() {
    // get new date
    // const ms = new Date().getTime() + (86400000*3.5);
    // const time = new Date(ms);
    //debugger;
    const dateProps = moment(this.props.remaningDays);

    if (dateProps) {
      const today = moment();
      const timeDiff = moment.duration(dateProps - today);
      // set time units

      const days = timeDiff.days();
      const hours = timeDiff.hours();
      const minutes = timeDiff.minutes();
      const seconds = timeDiff.seconds();
      // const days = 3;
      // const hours = 24;
      // const minutes = 35;
      // const seconds = 08;
      // on hour chanage, update hours and shuffle state
      if (days !== this.state.days) {
        const daysShuffle = !this.state.daysShuffle;
        this.setState({
          days,
          daysShuffle
        });
      }
      if (hours !== this.state.hours) {
        const hoursShuffle = !this.state.hoursShuffle;
        this.setState({
          hours,
          hoursShuffle
        });
      }
      // on minute chanage, update minutes and shuffle state
      if (minutes !== this.state.minutes) {
        const minutesShuffle = !this.state.minutesShuffle;
        this.setState({
          minutes,
          minutesShuffle
        });
      }
      // on second chanage, update seconds and shuffle state
      if (seconds !== this.state.seconds) {
        const secondsShuffle = !this.state.secondsShuffle;
        this.setState({
          seconds,
          secondsShuffle
        });
      }
      if (timeDiff < 0) {
        this.setState({ lateCounter: true });
      }
      // this.setState({seconds: seconds,days:days,
      //   hours:hours,
      //   minutes:minutes })

      // this.setState({})
    }
  }

  render() {
    // state object destructuring
    const {
      days,
      hours,
      minutes,
      seconds,
      daysShuffle,
      hoursShuffle,
      minutesShuffle,
      secondsShuffle
    } = this.state;

    return (
      <div
        className={classNames("colock-container", {
          "late-counter": this.state.lateCounter
        })}
      >
        <div className={"flipClock"}>
          <FlipUnitContainer
            unit={"days"}
            digit={days}
            shuffle={daysShuffle}
            label={"D"}
          />
          <FlipUnitContainer
            unit={"hours"}
            digit={hours}
            shuffle={hoursShuffle}
            label={"H"}
          />
          <FlipUnitContainer
            unit={"minutes"}
            digit={minutes}
            shuffle={minutesShuffle}
            label={"M"}
          />
          <FlipUnitContainer
            unit={"seconds"}
            digit={seconds}
            shuffle={secondsShuffle}
            label={"S"}
          />
        </div>
      </div>
    );
  }
}

export default CountDown;
