import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";
import SlidingFloatingFilter from "./SlidingFloatingFilter";

export default class FloatingFilterGridExample extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columnDefs: FloatingFilterGridExample.createColumnDefs(),
            rowData: FloatingFilterGridExample.createRowData()
        }
    }

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

        this.gridApi.sizeColumnsToFit();
    }

    static createColumnDefs() {
        return [
            {
                field: "country",
                suppressFilter: true
            },
            {
                field: "language",
                suppressFilter: true
            },
            {
                field: "name",
                suppressFilter: true
            },
            {
                field: "gold",
                floatingFilterComponentFramework: SlidingFloatingFilter,
                floatingFilterComponentParams: {
                    maxValue: 7,
                    suppressFilterButton: true
                },
                filter: 'number',
                suppressMenu: false
            },
            {
                field: "silver",
                filter: 'number',
                floatingFilterComponentFramework: SlidingFloatingFilter,
                floatingFilterComponentParams: {
                    maxValue: 5,
                    suppressFilterButton: true
                },
                suppressMenu: false
            },
            {
                field: "bronze",
                filter: 'number',
                floatingFilterComponentFramework: SlidingFloatingFilter,
                floatingFilterComponentParams: {
                    maxValue: 10,
                    suppressFilterButton: true
                },
                suppressMenu: false
            }
        ];
    }

    static createRowData() {
        return [
            {country: "United States", language: "English", name: "Bob", gold: 1, silver: 3, bronze: 0},
            {country: "United States", language: "English", name: "Jack", gold: 0, silver: 1, bronze: 1},
            {country: "United States", language: "English", name: "Sue", gold: 3, silver: 0, bronze: 1},
            {country: "United Kingdom", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2},
            {country: "United Kingdom", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1},
            {country: "United Kingdom", language: "English", name: "John", gold: 0, silver: 2, bronze: 1},
            {country: "Jamaica", language: "English", name: "Bob", gold: 4, silver: 1, bronze: 2},
            {country: "Jamaica", language: "English", name: "Jack", gold: 3, silver: 1, bronze: 2},
            {country: "Jamaica", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2},
            {country: "South Africa", language: "English", name: "Bob", gold: 4, silver: 0, bronze: 1},
            {country: "South Africa", language: "English", name: "Jack", gold: 3, silver: 0, bronze: 1},
            {country: "South Africa", language: "English", name: "Mary", gold: 5, silver: 3, bronze: 1},
            {country: "South Africa", language: "English", name: "John", gold: 2, silver: 3, bronze: 1},
            {country: "New Zealand", language: "English", name: "Bob", gold: 5, silver: 3, bronze: 10},
            {country: "New Zealand", language: "English", name: "Jack", gold: 1, silver: 1, bronze: 1},
            {country: "New Zealand", language: "English", name: "Sue", gold: 1, silver: 3, bronze: 1},
            {country: "Australia", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 3},
            {country: "Australia", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1},
            {country: "Australia", language: "English", name: "John", gold: 3, silver: 2, bronze: 1},
            {country: "Canada", language: "English", name: "Bob", gold: 7, silver: 5, bronze: 3},
            {country: "Canada", language: "English", name: "Jack", gold: 2, silver: 1, bronze: 3},
            {country: "Canada", language: "English", name: "Mary", gold: 0, silver: 1, bronze: 3},
            {country: "Switzerland", language: "French", name: "Bob", gold: 2, silver: 3, bronze: 1},
            {country: "Switzerland", language: "French", name: "Jack", gold: 2, silver: 3, bronze: 1},
            {country: "Switzerland", language: "French", name: "Mary", gold: 1, silver: 3, bronze: 1},
            {country: "Switzerland", language: "French", name: "John", gold: 1, silver: 4, bronze: 1},
            {country: "Spain", language: "Spanish", name: "Bob", gold: 1, silver: 4, bronze: 0},
            {country: "Spain", language: "Spanish", name: "Jack", gold: 0, silver: 1, bronze: 1},
            {country: "Spain", language: "Spanish", name: "Sue", gold: 1, silver: 4, bronze: 1},
            {country: "Portugal", language: "Portuguese", name: "Mary", gold: 2, silver: 1, bronze: 4},
            {country: "Portugal", language: "Portuguese", name: "Tess", gold: 3, silver: 1, bronze: 1},
            {country: "Portugal", language: "Portuguese", name: "John", gold: 5, silver: 2, bronze: 1},
            {country: "Zimbabwe", language: "English", name: "Bob", gold: 3, silver: 1, bronze: 4},
            {country: "Zimbabwe", language: "English", name: "Jack", gold: 4, silver: 1, bronze: 4},
            {country: "Zimbabwe", language: "English", name: "Mary", gold: 2, silver: 1, bronze: 4},
            {country: "Brazil", language: "Brazillian", name: "Bob", gold: 3, silver: 4, bronze: 1},
            {country: "Brazil", language: "Brazillian", name: "Jack", gold: 2, silver: 4, bronze: 1},
            {country: "Brazil", language: "Brazillian", name: "Mary", gold: 4, silver: 0, bronze: 1},
            {country: "Brazil", language: "Brazillian", name: "John", gold: 1, silver: 0, bronze: 1}];
    }

    render() {
        let divStyle = {
            height: 400,
            width: 900
        };

        return (
            <div style={divStyle} className="ag-fresh">
                <h1>Floating Filter Example</h1>
                <AgGridReact
                    // properties
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}

                    floatingFilter

                    // events
                    onGridReady={this.onGridReady}>
                </AgGridReact>
            </div>
        )
    }
};