// The URL we need to fetch our campers.
const URL = "https://fcctop100.herokuapp.com/api/fccusers/top/recent";

///
/// \class  CamperComponent
/// \brief  Displays a record of a single camper.
///
/// This class expects four properties:
///
/// name:           The username of the camper.
/// img:            The camper's profile picture.
/// recent:         The amount of Brownie Points (BP) the user has
///                 earned over the last 30 days.
/// alltime:        The amount of BP the user has earned overall.
///
class CamperComponent extends React.Component {
    ///
    /// \brief  The constructor.
    ///
    /// \param  props       The expected properties.
    ///
    constructor (props) {
        super(props);
    }

    ///
    /// \fn     render
    /// \brief  Renders the component.
    ///
    /// This camper's record will be rendered in a table row, so
    /// render this inside the body of a table.
    ///
    render () {
        // Check to see if the camper's name is too long. If so, truncate
        // it with the ellipsis.
        const renderedName = (
            this.props.name.length > 13 ?
                this.props.name.slice(0, 10) + "..." :
                this.props.name
        );

        return (
            <tr>
                <td>
                    <img src={this.props.img} alt={this.props.name} width="32px" />
                </td>
                <td>
                    <a href={"https://freecodecamp.com/" + this.props.name} target="_blank">
                        {renderedName}
                    </a>
                </td>
                <td>
                    {this.props.recent}
                </td>
                <td>
                    {this.props.alltime}
                </td>
            </tr>
        );
    }
};

///
/// \class  BoardComponent
/// \brief  Displays a list of leading Campers.
///
class BoardComponent extends React.Component {
    ///
    /// \fn     toggleSorting
    /// \brief  Toggles the sorting of our leaderboard.
    ///
    /// \param  score       Which score shall be toggled?
    ///
    toggleSorting (score) {
        // Store a temporary copy of the campers array.
        let camperArray = this.state.campers.array.slice();

        // Find out what score we are sorting, and in what direction,
        // if any at all.
        const currentDirection = this.state.campers.sorting.direction;
        const currentScore = this.state.campers.sorting.score;

        // Find out what kind of sorting we'll have to do, and store it
        // here.
        let newSorting = null;

        // Determine the sorting order here.
        if (score === currentScore) {
            // If we are not sorting the other score, then find out how
            // we are sorting it here. If we are sorting in ascending order, 
            // then sort descending. Otherwise, sort ascending.
            if (currentDirection === "ascending") {
                newSorting = "descending";
            }
            else if (currentDirection === "descending") {
                newSorting = "ascending";
            }
        } else {
            // If we are sorting out the other score (we were sorting recent, but
            // now we want to sort alltime, for instance), then default to descending.
            newSorting = "descending";
        }
        
        // Sort our array according to the new sorting order.
        if (newSorting === "ascending") {
            camperArray.sort((a, b) => a[score] - b[score]);
        }
        else if (newSorting === "descending") {
            camperArray.sort((a, b) => b[score] - a[score]);
        }

        // Update our state.
        this.setState({
            campers: {
                array: camperArray,
                sorting: {
                    score: score,
                    direction: newSorting
                }
            }
        });
    }

    ///
    /// \brief  The constructor.
    ///
    /// \param  props       The expected properties.
    ///
    constructor (props) {
        super(props);

        this.state = {
            campers: {
                array: [],
                sorting: {
                    score: "recent",
                    direction: "none"
                }
            },
            fetchError: null
        };
    }

    ///
    /// \fn     componentDidMount
    /// \brief  Called when the component is rendered for the first time.
    ///
    componentDidMount () {
        // Fetch our campers from the server.
        axios.get(URL).then(response => {
            // Update the state with our new array.
            this.setState({
                campers: {
                    array: response.data,
                    sorting: {
                        score: "recent",
                        direction: "descending"
                    },
                    fetchError: null
                }
            });
        }).catch(error => {
            // If the request returned a response other than 200...
            if (error.response) {
                // Adjust our state accordingly.
                this.setState({
                    fetchError: `Could not retrieve the data (Status Code ${error.response.status}).`
                });
            }
            else {
                this.setState({
                    fetchError: `Could not retrieve the data (${error.message}).`
                });
            }
        });
    }

    ///
    /// \fn     onRecentClicked
    /// \brief  Handled when the "Last 30 Days" button is clicked.
    ///
    onRecentClicked () {
        this.toggleSorting("recent");
    }

    ///
    /// \fn     onAlltimeClicked
    /// \brief  Handled when the "All Time" button is clicked.
    ///
    onAlltimeClicked () {
        this.toggleSorting("alltime");
    }

    ///
    /// \fn     renderTable
    /// \brief  Renders the table inside which our leaderboard will reside.
    ///
    renderTable () {
        // Map our campers into an array of renderable elements.
        const mapped = this.state.campers.array.map((val, index) => {
            return (
                <CamperComponent key={index}
                                 name={val.username}
                                 img={val.img}
                                 recent={val.recent}
                                 alltime={val.alltime} />
            );
        });

        // Render a table with our campers in it.
        return (
            <table>
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Camper</th>
                        <th>
                            <a href="#" onClick={this.onRecentClicked.bind(this)}>
                                {
                                    this.state.campers.sorting.score == "recent" ?
                                        (this.state.campers.sorting.direction === "descending" ? 
                                            `Recent (d)` :
                                            `Recent (a)`) :
                                        `Recent`
                                }
                            </a>
                        </th>
                        <th>
                            <a href="#" onClick={this.onAlltimeClicked.bind(this)}>
                                {
                                    this.state.campers.sorting.score == "alltime" ?
                                        (this.state.campers.sorting.direction === "descending" ? 
                                            `Overall (d)` :
                                            `Overall (a)`) :
                                        `Overall`
                                }
                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {mapped}
                </tbody>
            </table>
        );
    }

    ///
    /// \fn     render
    /// \brief  Renders the component.
    ///
    render () {
        // Check to see if there was an error fetching the data.
        if (this.state.fetchError) {
            // Let the user know what went wrong.
            return (
                <div className="errorMessage">
                    <h2>There was an error retriving the data.</h2>
                    <p>{this.state.fetchError}</p>
                </div>
            );
        } else {
            // Check to see if we have fetched our campers yet.
            if (this.state.campers.array.length === 0) {
                // Let us know that we are still fetching.
                return (
                    <h2>Fetching Campers. Please Wait...</h2>
                );
            } else {
                return this.renderTable();
            }
        }
    }
};

///
/// \class  MainComponent
/// \brief  The main component of our application.
///
class MainComponent extends React.Component {
    ///
    /// \brief  The constructor.
    ///
    constructor () {
        super();
    }

    ///
    /// \fn     render
    /// \brief  Renders the component.
    ///
    render () {
        return (
            <div>
                <h1>Camper Leaderboard</h1>
                <BoardComponent />
                <h6>
                    Coded by Dennis Griffin. 
                    Leaderboard powered by freeCodeCamp.
                </h6>
            </div>
        );
    }
};

const content = document.getElementById("content");
ReactDOM.render(<MainComponent />, content);