import { connect } from 'react-redux';
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { invitesEnabled, repository, source_url, version } from 'mastodon/initial_state';
import { logOut } from 'mastodon/utils/log_out';
import { openModal } from 'mastodon/actions/modal';
import { isStaff } from '../../../initial_state';

const messages = defineMessages({
  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
});

const mapDispatchToProps = (dispatch, { intl }) => ({
  onLogout() {
    dispatch(openModal('CONFIRM', {
      message  : intl.formatMessage(messages.logoutMessage),
      confirm  : intl.formatMessage(messages.logoutConfirm),
      onConfirm: () => logOut(),
    }));
  },
});

// const themeIsDark = true;
// const displaythemetoggler = true;
export default @injectIntl
@connect(null, mapDispatchToProps)
class LinkFooter extends React.PureComponent {

  static propTypes = {
    enableChristmasSnow: PropTypes.bool,
    snowActive         : PropTypes.bool,
    withHotkeys        : PropTypes.bool,
    snow               : PropTypes.func,
    onLogout           : PropTypes.func.isRequired,
    intl               : PropTypes.object.isRequired,
  };
  static defaultProps = {
    enableChristmasSnow: true,
  };

  handleLogoutClick = e => {
    e.preventDefault();
    e.stopPropagation();

    this.props.onLogout();

    return false;
  };

  constructor(props) {
    super(props);
    Date.prototype.getWeek = function () {
      var onejan = new Date(this.getFullYear(), 0, 1);
      return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
    };

    var weekNumber = (new Date()).getWeek();
    // display snow during the last two weeks of the year
    console.log('week', weekNumber);
    const shouldWeDisplaySnow = (weekNumber > 48) && props.enableChristmasSnow;

    this.state = { enableChristmasSnow: shouldWeDisplaySnow };

    // make snow effect
    if (shouldWeDisplaySnow) {
      import('../../../utils/snowstorm-min')
        .then((snowstorm) => {
          Window.snowstorm = snowstorm.default;
          this.state.snow = Window.snowstorm;
          console.log('this.state.snow ', this.state.snow);
          // snowstorm.start();
          this.state.snowActive = true;
        })
        .catch((err) => console.error(err));
    }

  }

  toggleSnow = () => {
    console.log('toggle snow');
    if (this.state.snow) {
      if (this.state.snowActive) {
        this.state.snow.stop();
        this.state.snowActive = false;
      } else {
        this.state.snow.start();
        this.state.snowActive = true;
      }

    }
  };

  changeTheme(newTheme) {
    console.log('change theme en ', newTheme);
  }

  render() {
    const { withHotkeys } = this.props;
    var snowClasses = this.props.snowActive ? 'snow-button active' : 'snow-button ';

    return (

      <div className='getting-started__footer'>

        <div className='extras'>

          {/*// TODO*/}
          {/*<button className='mod-theme btn btn-block'>*/}
          {/*  {themeIsDark ? (*/}
          {/*    <span*/}
          {/*      onClick={this.changeTheme('light')}*/}
          {/*      title='set light'*/}
          {/*    >*/}
          {/*      <i className='fa fa-pencil-o' />*/}
          {/*    </span >*/}
          {/*  ) : (*/}
          {/*    <span*/}
          {/*      onClick={this.changeTheme('dark')}*/}
          {/*      title='set dark'*/}
          {/*    >*/}
          {/*      <i className='fa fa-pencil' />*/}
          {/*    </span >*/}
          {/*  )}*/}
          {/*</button >*/}

          {this.state.enableChristmasSnow && (
            <div
              onClick={this.toggleSnow}
              className='christmas-snow'
            >
              <div className={snowClasses}>
                <i
                  className='icon fa fa-snowflake-o'
                  aria-hidden='true'
                />
              </div >
              <div > Joyeuses fêtes!</div >
              {isStaff && (

                <a href='/admin/tags?pending_review=1'>
                  <i className='fa fa-fire' />
                  Trending hashtags</a >

              )}
              <br />
              <div className='external-utilities'>
                <a href='https://mastodon.cipherbliss.com/@tykayn'>
                  <i className='fa fa-paper-plane' />
                  contactez nous
                </a >
                <a href='https://liberapay.com/cipherbliss'><i className='fa fa-coffee' /> Supportez Cipherbliss</a >

                <a href='https://peertube.cipherbliss.com'> <i className='fa fa-play ' /> Videos</a >
                <a href='https://framadate.org/'> <i className='fa fa-calendar' /> FramaDate</a >
                <a href='https://framapad.org/'> <i className='fa fa-file-text' /> Pad</a >
                <a href='https://framagit.org/tykayn/mastodon'> <i className='fa fa-gitlab' /> Source</a >
                <hr />
                <a href='/web/timelines/tag/vélo'> <i className='fa fa-bicycle' /> #vélo</a >
                <a href='/web/timelines/tag/openstreetmap'> <i className='fa fa-map-o' /> #OpenStreetMap</a >
                <a href='/web/timelines/tag/mastoart'> <i className='fa fa-paint-brush' /> #Mastoart</a >
                <a href='/web/timelines/tag/ironèmes'> <i className='fa fa-file-text-o' /> #ironèmes</a >
              </div >
            </div >
          )}
        </div >

        <ul >

          {invitesEnabled && <li ><a
            href='/invites'
            target='_blank'
          ><FormattedMessage
            id='getting_started.invite'
            defaultMessage='Invite people'
          /> ·</a >
          </li >}
          {withHotkeys && <li ><Link to='/keyboard-shortcuts'>
            <FormattedMessage
              id='navigation_bar.keyboard_shortcuts'
              defaultMessage='Hotkeys'
            /> ·
          </Link >
          </li >}
          <li >
            <a href='/auth/edit'>
              <FormattedMessage
                id='getting_started.security'
                defaultMessage='Security'
              /> ·
            </a >
          </li >
          <li >
            <a
              href='/about/more'
              target='_blank'
            ><FormattedMessage
              id='navigation_bar.info'
              defaultMessage='About this server'
            /> ·
            </a >
          </li >
          <li >
            <a
              href='https://joinmastodon.org/apps'
              target='_blank'
            ><FormattedMessage
              id='navigation_bar.apps'
              defaultMessage='Mobile apps'
            /> ·
            </a >
          </li >
          <li >
            <a
              href='/terms'
              target='_blank'
            >
              <FormattedMessage
                id='getting_started.terms'
                defaultMessage='Terms of service'
              /> ·</a >
          </li >
          <li >
            <a
              href='/settings/applications'
              target='_blank'
            ><FormattedMessage
              id='getting_started.developers'
              defaultMessage='Developers'
            /> ·
            </a >
          </li >
          <li >
            <a
              href='https://docs.joinmastodon.org'
              target='_blank'
            >
              <FormattedMessage
                id='getting_started.documentation'
                defaultMessage='Documentation'
              />
            </a > ·
          </li >
          <li >
            <a
              href='/auth/sign_out'
              onClick={this.handleLogoutClick}
            >
              <FormattedMessage
                id='navigation_bar.logout'
                defaultMessage='Logout'
              />
            </a >
          </li >
        </ul >

        <p >
          <FormattedMessage
            id='getting_started.open_source_notice'
            defaultMessage='Mastodon is open source software. You can contribute or report issues on the forge at {forge}.'
            values={{
              forge: <span ><a
                href={source_url}
                rel='noopener noreferrer'
                target='_blank'
              >{repository}</a > (v{version})</span >,
            }}
          />
        </p >
      </div >
    );
  }

};