import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment-timezone';
import Countdown from './Countdown';
import Header from './Header';
import getUpcomingDate from './getUpcomingDate';
import FontAwesome from 'react-fontawesome';
import WebFont from 'webfontloader';


import style from './App.sass';


WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

class App extends React.Component {
  static propTypes = {
    getNow: PropTypes.func,
    weekdays: PropTypes.arrayOf(PropTypes.string),
  }

  static defaultProps = {
    getNow: () => moment(),
    weekdays: [
      'tuesday',
      'thursday',
      'saturday',
    ],
  }

  componentDidMount() {
    this.interval = setInterval(this.updateUpcomingDate.bind(this), 1000);
    this.updateUpcomingDate();
  }

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

  calculateUpcomingDate() {
    const { getNow, weekdays } = this.props;
    const now = getNow();
    return moment.min(
      ...weekdays.map(weekday => getUpcomingDate(now, weekday)),
    );
  }

  updateUpcomingDate() {
    this.setState({ nextUpcomingDate: this.calculateUpcomingDate() });
  }

  render() {
    if (!this.state) {
      return null;
    }

    const { nextUpcomingDate } = this.state;
    if (!nextUpcomingDate) {
      return null;
    }

    return (
      <div className={style.app}>
        <Header>
          VIzon countdown
        </Header>

        <div className={style.content}>
          <p>
              The next VIzon draw is on {nextUpcomingDate.format('dddd')}, {nextUpcomingDate.format('L LT z')}.
          </p>
          <Countdown date={nextUpcomingDate} />
          </div>
          <div className={style.footer}>
              Made by Icedream & MAGIC
        </div>
      </div>
    );
  }
}

export default App;