import React from 'react';
import './App.scss';
import UserStatsMockService from "./mock/UserStatsMockService";
import UserStatsService from "./services/UserStatsService";
import {findDOMNode} from "react-dom";
import TableEntry from "./models/TableEntry";

interface State {
  error?: string,
  isLoaded: boolean,
  users?: TableEntry[],
  mock?: TableEntry[]
}

export default class App extends React.Component {

  private apiService: UserStatsService = new UserStatsService();
  private mockService = new UserStatsMockService();

  state: State = {
    error: undefined,
    isLoaded: false,
    users: undefined,
    mock: undefined
  }

  componentDidMount() {
    this.setState({isLoaded: false, mock: this.mockService.getStatsWithoutPromise()});
    // this.mockService.getStats()
    //   .then(data => this.setState({
    //     data: data,
    //     mock: data
    //   }))
    //   .finally(() => {
    //   });
    this.apiService.getStats()
      .then(data => this.setState({
        isLoaded: true,
        users: data
      }))
      .catch(error => {
        error.response.json()
          .then((err: any) => this.setState({
            isLoaded: true,
            error: err.error
          }))
      });
  }

  componentDidUpdate() {
    const element = findDOMNode(this);
    if (element != null) {
      window.scrollTo(0, 0);
    }
  }

  createTableEntries(entries: TableEntry[]) {
    return entries.map((entry, index) => {
      const placement = index + 1;
      const placementClassName = placement === 1 ? "first-place"
        : (placement === 2 ? "second-place"
          : (placement === 3 ? "third-place"
            : undefined))
      return (
        <tr key={index} className={placementClassName}>
          <td>{placement}</td>
          <td>{entry.name}</td>
          <td>{entry.onlineTime}</td>
        </tr>
      )
    });
  }

  renderTableData() {
    const { error, isLoaded, users, mock } = this.state;
    if (users != null && isLoaded && error == null) {
      return this.createTableEntries(users);
    } else if (isLoaded && error != null && mock != null) {
      return this.createTableEntries(mock);
    } else if (mock != null) {
      return this.createTableEntries(mock);
    }
  }

  render() {
    return (
      <div className="App">
        <p className="title">Humenius' TeamSpeak 3-Ranking</p>
        { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null}
        <table>
          <thead>
          <tr>
            <th>Placement</th>
            <th>Name</th>
            <th>Online time</th>
          </tr>
          </thead>
          <tbody className={this.state.error != null || !this.state.isLoaded ? "blurred" : undefined}>
            {this.renderTableData()}
          </tbody>
        </table>
        <footer>
          Made by <a href="https://humenius.me"
        >Humenius</a>.
          Powered by <a href="https://reactjs.org/"
        >React</a>.
          <br/>
          <a href="ts3server://ts.humenius.me">
            Click here to join my TeamSpeak server
          </a>
        </footer>
      </div>
    );
  }
}