import React, {Component} from "react";
import {Button, Row} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {get_all_incident_reports} from "../../api_calls/incident_calls";
import Incident_table from "./incident_table";
import New_incident_drawer from "./new_incident_drawer";
import {withRouter} from "react-router";

class Incident_home extends Component{

    constructor(props) {
        super(props);
        this.state = {
            "incident_table_data": [],
            "new_incident_drawer_visible": false,
            "query_params": this.handle_query_params(props)
        }
        this.open_drawer = this.open_drawer.bind(this);
        this.close_drawer = this.close_drawer.bind(this);
        this.refresh_table = this.refresh_table.bind(this);
        this.handle_query_params = this.handle_query_params.bind(this);
    }

    componentDidMount() {

        this.handle_query_params(this.props);

        get_all_incident_reports().then(data => {
            this.setState({"incident_table_data": data})
        })
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.setState({query_params: this.handle_query_params(nextProps)});
    }

    handle_query_params(props){

        if(!props.hasOwnProperty("location")){
            return {}
        }else{
            let query_params = {}
            let search_string = props.location.search;
            if(search_string !== ""){

                if(search_string[0] === "?")
                    search_string = search_string.substr(1);

                search_string.split("&").forEach(key_val =>{
                    const key = key_val.split("=")[0];
                    query_params[key] = key_val.split("=")[1];
                })
            }
            return query_params;
        }
    }

    refresh_table() {
        get_all_incident_reports().then(data => {
            this.setState({"incident_table_data": data})
        })
    }

    close_drawer(){
        this.setState({new_incident_drawer_visible: false})
    }

    open_drawer(){
        this.setState({new_incident_drawer_visible: true})
    }

    render() {
        return (
            <div style={{padding: "30px"}}>

                <Incident_table data={this.state.incident_table_data} refresh_callback={this.refresh_table} query_params={this.state.query_params}/>
                <New_incident_drawer visibility={this.state.new_incident_drawer_visible} draw_close_callback={this.close_drawer} refresh_callback={this.refresh_table}/>
                <Button type="primary" shape="circle" icon={<PlusOutlined/>} size={"large"}
                        style={{
                            position: "fixed",
                            right: "50px",
                            bottom: "50px",
                            boxShadow: "0 6px 14px 0 #666",
                            backgroundColor: "#316DC1"
                        }}
                        onClick={this.open_drawer}
                />
            </div>
        );
    }
}

export default withRouter(Incident_home);