import React, { Component } from 'react';
import axios from 'axios';
import FadeIn from 'react-fade-in';
import { withStyles } from '@material-ui/styles';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Form from './Form';
import Placeholder from './Placeholder';

import styles from '../styles/HelpStyles';

class Help extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: '',
      data: {},
      currentResources: [],
      loadingStatus: null,
    };
    this.handleQuery = this.handleQuery.bind(this);
    this.handleLoading = this.handleLoading.bind(this);
    this.getData = this.getData.bind(this);
  }

  componentDidMount() {
    this.fetchResources();
  }

  async fetchResources() {
    try {
      const [response] = await Promise.all([
        axios.get('https://data.covid19india.org/resources/resources.json'),
      ]);
      const hashmap = {};
      response.data.resources.forEach((x) => {
        if (typeof hashmap[x['state']] === 'undefined')
          hashmap[x['state']] = {};
        if (typeof hashmap[x['state']][x['city']] === 'undefined')
          hashmap[x['state']][x['city']] = {};

        if (
          typeof hashmap[x['state']][x['city']][x['category']] === 'undefined'
        )
          hashmap[x['state']][x['city']][x['category']] = [];
        if (Array.isArray(hashmap[x['state']][x['city']][x['category']]))
          hashmap[x['state']][x['city']][x['category']].push(x);
      });
      this.setState({ data: hashmap });
    } catch (err) {}
  }

  handleQuery(query) {
    this.setState({ query: query }, this.getData);
  }

  handleLoading() {
    this.setState({ loadingStatus: 'loading' });
  }

  getData() {
    let resources = [];
    for (const key of Object.keys(this.state.data)) {
      if (key.toLowerCase() === this.state.query.toLowerCase()) {
        resources.push({ ...this.state.data[key] });
      } else {
        for (const dist of Object.keys(this.state.data[key])) {
          if (dist.toLowerCase() === this.state.query.toLowerCase()) {
            resources.push({ [key]: this.state.data[key][dist] });
          }
        }
      }
    }
    this.setState({ currentResources: resources });
    setTimeout(() => this.setState({ loadingStatus: 'completeLoading' }), 2000);
  }

  render() {
    const { classes } = this.props;
    const res = this.state.currentResources.map((object) => {
      for (const key in object) {
        if (object.hasOwnProperty(key)) {
          for (const key2 in object[key]) {
            if (object[key].hasOwnProperty(key2)) {
              const result = object[key][key2].map((resource) => (
                <FadeIn
                  key={resource.phonenumber.split(0, 5)}
                  className={classes.card}
                >
                  <div className={classes.header}>
                    <h3 className={classes.cardHeading}>{resource.category}</h3>
                    <a
                      className={classes.cardLink}
                      href={resource.contact}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <FontAwesomeIcon
                        icon={faExternalLinkAlt}
                        className={classes.icons}
                      />
                    </a>
                  </div>
                  <div className={classes.content}>
                    <p className={classes.text}>
                      Organization: {resource.nameoftheorganisation}
                    </p>
                    <p className={classes.text}>
                      Contact: {resource.phonenumber}
                    </p>
                  </div>
                </FadeIn>
              ));
              return result;
            }
          }
        }
      }
      return null;
    });
    return (
      <div className={classes.help}>
        <h1 className={classes.mainHeading}>
          Search for Essentials and Services
        </h1>
        <Form
          handleQuery={this.handleQuery}
          handleLoading={this.handleLoading}
        />
        {this.state.loadingStatus === 'loading' && (
          <div className={classes.container}>
            <Placeholder />
            <Placeholder />
            <Placeholder />
          </div>
        )}
        {this.state.loadingStatus === 'completeLoading' && (
          <div className={classes.container}>{res}</div>
        )}
      </div>
    );
  }
}

export default withStyles(styles)(Help);