import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';
import '@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css';
import '@ag-grid-enterprise/all-modules/dist/styles/ag-theme-alpine.css';
import '@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham-dark.css';

class DataVisualize extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columnDefs: [
                {
                    field: 'name',
                    minWidth: 200,
                },
                {
                    field: 'offers_in_app_purchases',
                    minWidth: 200,
                },
                { field: 'price_cents',
                    minWidth: 200,
                },
                { field: 'age_restrictions',
                    minWidth: 200,
                },
                { field: 'last_update_date',
                    minWidth: 200,
                },
                { field: 'initial_release_date',
                    minWidth: 200,
                },
                { field: 'cross_store_app_id',
                    minWidth: 200,
                },
            ],
            defaultColDef: {
                flex: 1,
                minWidth: 90,
                resizable: true,
            },
            rowModelType: 'serverSide',
            paginationPageSize: 1000,
            cacheBlockSize: 10000,
        };
    }

    onColumnMove(){
        console.log(12)
    };

    onGridReady (params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;

        const datasource = ServerSideDatasource();
        params.api.setServerSideDatasource(datasource);


    };


    static appIconRenderer(params) {
        if (params.value) {
            return `<img width='75' height='75' style='margin-bottom: 2px; margin-top: 15%;' src='${params.value}' alt=""> `;
        } else {
            return null;
        }
    }

    static urlRenderer(params) {
        if (params.value) {
            return `<a href="${params.value}" style="font-size: xx-large" target="_blank"> Link </a>`;
        } else {
            return '';
        }
    }

    render() {
        return (
            <div
                className={"ag-theme-balham-dark"}
                style={{height: "90vh",
                width: "90vw",
                paddingTop: "5%",
                paddingLeft: "4%"}}>
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    defaultColDef={this.state.defaultColDef}
                    rowModelType={this.state.rowModelType}
                    rowSelection={this.state.rowSelection}
                    pagination={true}
                    paginationPageSize={this.state.paginationPageSize}
                    cacheBlockSize={this.state.cacheBlockSize}
                    onGridReady={this.onGridReady}
                >
                </AgGridReact>
            </div>
        );
    }

}

function ServerSideDatasource() {
    return {
        getRows: function(params) {
            fetch('http://localhost:9000/api/post/datas', {
                method: 'POST',
                body: JSON.stringify(params.request),
                headers: {"Content-Type": "application/json; charset=utf-8"}
            })
                .then(httpResponse => httpResponse.json())
                .then(response => {
                    params.successCallback(response.rows, response.lastRow);
                })
                .catch(error => {
                    console.error(error);
                    params.failCallback();
                })


        },
    };
}

export default DataVisualize