import React, {Component} from 'react';
import {format, isPast} from 'date-fns';
import Favicon from 'react-favicon';
import {Helmet} from 'react-helmet';

import styles from './ConferencePage.scss';
import Link from '../Link';
import Heading from '../Heading';
import Icon from '../Icon';
import ConferenceList from '../ConferenceList';
import ConferenceFilter from '../ConferenceFilter';

const BASE_URL = 'https://raw.githubusercontent.com/nimzco/confs.tech/master/conferences';
const CURRENT_YEAR = (new Date()).getFullYear().toString();
const TYPES = {
  javascript: 'JavaScript',
  ux: 'UX',
  ruby: 'Ruby',
};

export default class ConferencePage extends Component {
  state = {
    filters: {
      year: '2017',
      type: 'javascript',
    },
    showPast: false,
    loading: true,
    conferences: [],
  };

  componentWillMount() {
    const {match: {params: {year, type}}} = this.props;
    if (!type) { return; }

    this.setState({
      filters: {
        year: year || CURRENT_YEAR,
        type,
      },
    });
  }

  componentWillReceiveProps(nextProps) {
    const {match: {params: {year, type}}} = nextProps;
    if (!type) { return; }

    this.setState({
      filters: {
        year: year || CURRENT_YEAR,
        type,
      },
    }, this.loadConference);
  }

  componentDidMount() {
    this.loadConference();
  }

  loadConference = () => {
    const {filters} = this.state;
    this.setState({loading: true});

    fetch(getConferenceLink(filters))
      .then((result) => result.json())
      // eslint-disable-next-line promise/always-return
      .then((conferences) => {
        this.setState({
          loading: false,
          conferences,
        });
      })
      .catch((error) => {
        console.warn(error); // eslint-disable-line no-console
      });
  };

  togglePast = () => {
    const {showPast} = this.state;
    this.setState({showPast: !showPast});
  };

  pastConferenceToggler = () => {
    const {showPast, filters: {year}} = this.state;

    if (CURRENT_YEAR !== year) {
      return null;
    }

    return (
      <p>
        <Link onClick={this.togglePast}>
          {showPast ? 'Hide past conferences' : 'Show past conferences'}
        </Link>
      </p>
    );
  };

  filterConferences = (conferences) => {
    const {showPast} = this.state;

    if (showPast) {
      return conferences;
    }

    return conferences.filter((conference) => {
      return !isPast(format(conference.startDate));
    });
  };

  render() {
    const {
      loading,
      conferences,
      filters: {year, type},
    } = this.state;

    return (
      <div>
        <Helmet>
          <title>{TYPES[type]} conferences in {year} | Confs.tech</title>
        </Helmet>
        <Favicon url={`${type}.png`} />
        <div>
          <Heading element="h1">Find your next {TYPES[type]} conference</Heading>
        </div>
        <div>
          <ConferenceFilter
            year={year}
            type={type}
          />
          {this.pastConferenceToggler()}
        </div>
        <div>
          {loading
            ? Loader()
            : <ConferenceList
              conferences={this.filterConferences(conferences)}
              />
          }
        </div>
      </div>
    );
  }
}

function getConferenceLink(state) {
  const {type, year} = state;
  return `${BASE_URL}/${year}/${type.toLocaleLowerCase()}.json`;
}

function Loader() {
  return (
    <div className={styles.Loader}>
      <Icon source="loading" size={64} />
    </div>
  );
}

@@ -847,235 +847,242 @@
     
-const %7Bmatch: %7Bparams: %7Byear, type%7D%7D%7D = this.props;%0A    if (!type) %7B return; %7D%0A%0A    this.setState(%7B%0A      filters: %7B%0A        year: year %7C%7C CURRENT_YEAR,%0A        type,%0A      %7D,%0A    %7D);%0A  %7D%0A%0A  componentWillReceiveProps(nextProps)
+this.updateStateWithNewFilters(this.props, this.loadConference);%0A  %7D%0A%0A  componentWillReceiveProps(nextProps) %7B%0A    this.updateStateWithNewFilters(nextProps, this.loadConference);%0A  %7D%0A%0A  updateStateWithNewFilters = (props, callback) =%3E
  %7B%0A 
@@ -1122,19 +1122,24 @@
 type
+, country
 %7D%7D%7D = 
-nextP
+p
 rops
@@ -1265,43 +1265,50 @@
     
-%7D,%0A    %7D, this.loadConference
+  country,%0A      %7D,%0A    %7D, callback
 );%0A  %7D
+;
 %0A%0A  

Refactor ConferencePage