import React, { Component } from "react";
import Text from "react-native-text";
import { StyleSheet, View } from "react-native";
import { observable, transaction } from "mobx";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import { observer, inject } from "mobx-react/native";
import Size from "../../config/size";
import theme from "../../config/colors";
import { Fonts } from "../../config/fonts";
const size = new Size();
@inject(["menuStore"])
@observer
export default class TopMessageText extends Component {
  orderClose = false;
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.state = {
      time: this.timeInit(),
      amPm: "am",
      countDownTime: ""
    };
    this.getTime = this.getTime.bind(this);
  }

  getInitialState() {
    return {
      time: "00:00:00",
      amPm: "am"
    };
  }

  secToCountDownTimer() {
    var time1 = this.props.date.getTime();
    var time2 = new Date().getTime();
    var diff = Math.abs(time1 - time2);
    addZero = n => (n < 10 ? "0" + n : n);
    var min = addZero(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)));
    var second = addZero(Math.floor((diff % (1000 * 60)) / 1000));
    this.setState({ countDownTime: `${min}:${second}` });
  }

  countDownTimer() {
    if (
      this.props.date.getDate() == new Date().getDate() &&
      this.props.date.getMonth() == new Date().getMonth() &&
      this.props.date.getHours() - new Date().getHours() == 1
    ) {
    return (
      <View
        style={{
          width: "50%",
          justifyContent: "center",
          alignItems: "flex-end",

        }}
      >
        <Text
          style={{ color: "white", fontSize: 12, ontFamily: Fonts.century }}
        >
          {this.state.countDownTime + " remain"}
        </Text>
      </View>
    );
    } else {
      return <View />;
    }
  }

  timeInit() {
    const takeTwelve = n => (n > 12 ? n - 12 : n),
      addZero = n => (n < 10 ? "0" + n : n);

    let d, h, m, s, t, amPm;

    d = this.props.date;
    h = addZero(takeTwelve(d.getHours()));
    m = addZero(d.getMinutes());
    s = addZero(d.getSeconds());
    amPm = d.getHours() >= 12 ? "p.m" : "a.m";
    t = `${h}:${m}${amPm}`;

    return t;
  }

  componentDidMount() {
    this.loadInterval = setInterval(this.getTime, 1000);
  }

  getTime() {
   
      this.secToCountDownTimer();

  }

  componentWillMount() {
    this.secToCountDownTimer();
    this.setState({ time: this.timeInit() });
  }
  message() {
    var month = new Array(12);
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";
    var date = this.props.date;
 
    return (
      "Menu For " +
      date.getUTCDate() +
      "-" +
      month[date.getMonth()] +
      "-" +
      date.getFullYear() 
    );
  }

  cutoffDateHandle() {
    this.props.date;
  }

  render() {
    const countDown = this.store.date;
    if (this.orderClose == false) {
      return (
        <View
          style={{
            flex: 1,
            alignItems: "center",
            paddingLeft: 30,
            paddingRight: 30
          }}
        >
          <View style={{ width: "100%", marginTop: verticalScale(8) }}>
            <Text
              style={{
                color: "white",
                fontSize: 17,
                fontFamily: Fonts.century,
                fontWeight: "bold",
                textDecorationLine: "underline"
              }}
            >
              {this.message()}
            </Text>
          </View>
          <View style={{ flexDirection: "row", width: "100%", marginTop:2 }}>
            <View
              style={{
                width: "50%",
                justifyContent: "center",
                alignItems: "flex-start",
           
              }}
            >
              <Text
                style={{
                  color: "white",
                  fontSize: 12,
                  ontFamily: Fonts.century
                }}
              >
                {"Orders Close at " + this.timeInit()}
              </Text>
            </View>
            {this.countDownTimer()}
          </View>
          {/* <View
            style={{
              width: "33%",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <Text style={{ color: "white" }}>{this.store.timestamp.getHours()}</Text>
          </View>  */}
        </View>
      );
    }
  }
}