import Head from "next/head";
import dynamic from "next/dynamic";
const Navbar = dynamic(import("../../components/Top/navbar"), { ssr: false });
import Resourceitem from "../../components/resources/resourceitem.js";
import Categorysidecard from "../../components/resources/categorysidecard.js";
import { Component } from "react";
import {withRouter} from "next/router";

const resourceurl =
    process.env.NODE_ENV === "production"
        ? "//codestats-test.herokuapp.com/api/resource/"
        : "http://localhost:8000/api/resource/";

class Resourceslist extends Component {
    state = {
        title : "",
        resourcelist: [],
        loaded: false,
    };
    componentDidMount() {
        let [,...params] = this.props.router.asPath.split('?');
        params = params.join("&");
        let resname = new URLSearchParams(params);
        let category = resname.get('cat');
        this.setState({title:category.charAt(0).toUpperCase() + category.slice(1)});
        // resname = resname[resname.length-1]
        // console.log(this.props.router, resname.get("cat"), params);
        fetch(resourceurl + category, {
            method: "GET",
            headers: {
                Accept: "application/json",
            },
        })
            .then((data) => {
                if (data.status == 400) {
                    console.log("Server Error");
                } else {
                    data.json().then((cats) => {
                        this.setState({ resourcelist: cats });
                        this.setState({ loaded: true });
                        // console.log(cats);
                    });
                }
            })
            .catch((err) => console.log("Error", err));
    }

    render() {
        return (
            <div>
                <Head>
                    <title>Discuss</title>
                    <link
                        rel="stylesheet"
                        href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
                        integrity="<KEY>"
                        crossOrigin="anonymous"
                    />
                    <link
                        rel="stylesheet"
                        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
                        integrity="<KEY>"
                        crossOrigin="anonymous"
                    />
                </Head>
                <div>
                    <Navbar />
                </div>
                <div>
                    <h1 className="title-resource ">{this.state.title}</h1>
                </div>
                <div className="container">
                    <div className="row">
                        <div className="col-9">
                            {this.state.loaded &&
                                this.state.resourcelist.map((res, index) => {
                                    return (
                                        <Resourceitem
                                            key={index}
                                            content={res.description}
                                            goto={res.link}
                                        />
                                    );
                                })}
                        </div>
                        <div className="col-3">
                            <h1 style={{ margin: "50px" }} className="h5">
                                More Categories
                            </h1>
                            <Categorysidecard content={"Bootstrap"} goto="#" />
                            <Categorysidecard content={"Next JS"} goto="#" />
                            <Categorysidecard content={"Postman"} goto="#" />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default withRouter(Resourceslist);
