import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";
import RowDataFactory from "./RowDataFactory";
import ColDefFactory from "./ColDefFactory.jsx";
import DateComponent from "./DateComponent.jsx";
import SortableHeaderComponent from "./SortableHeaderComponent";

import "./RichGridExample.css";
// take this line out if you do not want to use ag-Grid-Enterprise
import "ag-grid-enterprise";

export default class RichGridExample extends Component {

    constructor() {
        super();

        this.state = {
            quickFilterText: null,
            showToolPanel: false,
            columnDefs: new ColDefFactory().createColDefs(),
            rowData: new RowDataFactory().createRowData(),
            icons: {
                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
                filter: '<i class="fa fa-filter"/>',
                sortAscending: '<i class="fa fa-long-arrow-down"/>',
                sortDescending: '<i class="fa fa-long-arrow-up"/>',
                groupExpanded: '<i class="fa fa-minus-square-o"/>',
                groupContracted: '<i class="fa fa-plus-square-o"/>',
                columnGroupOpened: '<i class="fa fa-minus-square-o"/>',
                columnGroupClosed: '<i class="fa fa-plus-square-o"/>'
            }
        };

        // the grid options are optional, because you can provide every property
        // to the grid via standard React properties. however, the react interface
        // doesn't block you from using the standard JavaScript interface if you
        // wish. Maybe you have the gridOptions stored as JSON on your server? If
        // you do, the providing the gridOptions as a standalone object is just
        // what you want!
        this.gridOptions = {
            //We register the react date component that ag-grid will use to render
            dateComponentFramework: DateComponent,
            // this is how you listen for events using gridOptions
            onModelUpdated: function () {
                console.log('event onModelUpdated received');
            },
            defaultColDef: {
                headerComponentFramework: SortableHeaderComponent,
                headerComponentParams: {
                    menuIcon: 'fa-bars'
                }
            },
            // this is a simple property
            rowBuffer: 10, // no need to set this, the default is fine for almost all scenarios,
            floatingFilter: true
        };
    }


    /* Grid Events we're listening to */
    onGridReady = (params) => {
        this.api = params.api;
        this.columnApi = params.columnApi;
    };

    onCellClicked = (event) => {
        console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
    };

    onRowSelected = (event) => {
        console.log('onRowSelected: ' + event.node.data.name);
    };

    /* Demo related methods */
    onToggleToolPanel = (event) => {
        this.setState({showToolPanel: event.target.checked});
    };

    deselectAll() {
        this.api.deselectAll();
    }

    onQuickFilterText = (event) => {
        this.setState({quickFilterText: event.target.value});
    };

    onRefreshData = () => {
        this.setState({
            rowData: new RowDataFactory().createRowData()
        });
    };

    invokeSkillsFilterMethod = () => {
        let skillsFilter = this.api.getFilterInstance('skills');
        let componentInstance = skillsFilter.getFrameworkComponentInstance();
        componentInstance.helloFromSkillsFilter();
    };

    dobFilter = () => {
        let dateFilterComponent = this.api.getFilterInstance('dob');
        dateFilterComponent.setFilterType('equals');
        dateFilterComponent.setDateFrom('2000-01-01');

        // as the date filter is a React component, and its using setState internally, we need
        // to allow time for the state to be set (as setState is an async operation)
        // simply wait for the next tick
        setTimeout(() => {
            this.api.onFilterChanged();
        }, 0)
    };

    render() {
        return (
            <div style={{width: '900px'}}>
                <h1>Rich Grid with Declarative Markup Example</h1>
                <div style={{display: "inline-block", width: "100%"}}>
                    <div style={{float: "left"}}>
                        <b>Employees Skills and Contact Details</b><span id="rowCount"/>
                    </div>
                </div>
                <div style={{marginTop: 10}}>
                    <div>
                        <span>
                            Grid API:
                            <button onClick={() => { this.api.selectAll() }} className="btn btn-primary">Select All</button>
                            <button onClick={() => { this.api.deselectAll() }} className="btn btn-primary">Clear Selection</button>
                        </span>
                        <span style={{float: "right"}}>
                            Column API:
                            <button onClick={() => { this.columnApi.setColumnVisible('country', false) }} className="btn btn-primary">Hide Country Column</button>
                            <button onClick={() => { this.columnApi.setColumnVisible('country', true) }} className="btn btn-primary">Show Country Column</button>
                        </span>
                    </div>
                    <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
                        <div style={{float: "left"}}>
                            <label>
                                <input type="checkbox" onChange={this.onToggleToolPanel} style={{marginRight: 5}}/>
                                Show Tool Panel
                            </label>
                        </div>
                        <div style={{float: "left", marginLeft: 20}}>
                            <button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
                        </div>
                        <div style={{float: "left", marginLeft: 20}}>
                            <input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
                        </div>
                        <div style={{float: "right"}}>
                            Filter API:
                            <button onClick={this.invokeSkillsFilterMethod}
                                    className="btn btn-primary">Invoke Skills Filter Method
                            </button>
                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß</button>
                        </div>
                    </div>
                    <div style={{height: 400, width: 900}} className="ag-fresh">
                        <AgGridReact
                            ref="myGrid"
                            // gridOptions is optional - it's possible to provide
                            // all values as React props
                            gridOptions={this.gridOptions}

                            // listening for events
                            onGridReady={this.onGridReady}
                            onRowSelected={this.onRowSelected}
                            onCellClicked={this.onCellClicked}

                            // binding to simple properties
                            showToolPanel={this.state.showToolPanel}
                            quickFilterText={this.state.quickFilterText}

                            // binding to an object property
                            icons={this.state.icons}

                            // binding to array properties
                            columnDefs={this.state.columnDefs}
                            rowData={this.state.rowData}

                            // no binding, just providing hard coded strings for the properties
                            // boolean properties will default to true if provided (ie enableColResize => enableColResize="true")
                            suppressRowClickSelection
                            rowSelection="multiple"
                            enableColResize
                            enableSorting
                            enableFilter
                            groupHeaders
                            rowHeight="22"/>
                    </div>
                    <div>
                        <div className="row">
                            <div className="col-sm-12"><h1>Rich Grid Example</h1></div>
                        </div>
                        <div className="row">
                            <div className="col-sm-12">
                                <h5>This example demonstrates many features of ag-Grid.</h5>
                                <p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
                                    All
                                    Rows</p>
                                <p><span style={{fontWeight: 500}}>Hide/Show Country Column</span>: Select or Deselect
                                    All
                                    Rows
                                    (expand the Employee column to show the Country column first)</p>
                                <p><span style={{fontWeight: 500}}>Toggle The Tool Panel</span>: Let your users Pivot,
                                    Group
                                    and
                                    Aggregate using the Tool Panel</p>
                                <p><span style={{fontWeight: 500}}>Refresh Data</span>: Dynamically Update Grid Data</p>
                                <p><span style={{fontWeight: 500}}>Quick Filter</span>: Perform Quick Grid Wide
                                    Filtering
                                    with
                                    the Quick Filter</p>
                                <p><span style={{fontWeight: 500}}>DOB Filter</span>: Set the DOB filter to 01/01/2000
                                    using
                                    the
                                    Filter API (expand the Employee column to show the DOB column)</p>
                                <p><span style={{fontWeight: 500}}>Custom Headers</span>: Sort, Filter and Render
                                    Headers
                                    using
                                    Header Components</p>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-sm-4">
                                <div className="card">
                                    <div className="card-body">
                                        <h4 className="card-title">Grid & Column API</h4>
                                        <p className="card-text">Utilise Grid Features Programmatically Using the APIs
                                            Available</p>
                                        <a target="_blank" href="https://www.ag-grid.com/javascript-grid-api/"
                                           className="btn btn-primary">Grid API</a>
                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-column-api/"
                                           className="btn btn-primary">Column API</a>
                                    </div>
                                </div>
                            </div>
                            <div className="col-sm-4">
                                <div className="card">
                                    <div className="card-body">
                                        <h4 className="card-title">Header Components</h4>
                                        <p className="card-text">Customer the Header with React Components</p>
                                        <a target="_blank"
                                           href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerComponent"
                                           className="btn btn-primary">Header Component</a>
                                        <a target="_blank"
                                           href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerGroupComponent"
                                           className="btn btn-primary">Header Group Component</a>
                                    </div>
                                </div>
                            </div>
                            <div className="col-sm-4">
                                <div className="card">
                                    <div className="card-body">
                                        <h4 className="card-title">Filters</h4>
                                        <p className="card-text">Filter with Quick Filters, Floating Filters, Built In
                                            Filters
                                            or Using the
                                            Filter API</p>
                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-filter-quick/"
                                           className="btn btn-primary">Quick
                                            Filter</a>
                                        <a target="_blank"
                                           href="https://www.ag-grid.com//javascript-grid-floating-filter-component/"
                                           className="btn btn-primary">Floating Filters</a>
                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-filtering/"
                                           className="btn btn-primary">Built in
                                            Filters</a>
                                        <a target="_blank"
                                           href="https://www.ag-grid.com//javascript-grid-filtering/#accessing-filter-component-instances"
                                           className="btn btn-primary">Filter API</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-sm-4">
                                <div className="card">
                                    <div className="card-body">
                                        <h4 className="card-title">Tool Panel</h4>
                                        <p className="card-text">Let your users Pivot, Group and Aggregate using the
                                            Tool
                                            Panel</p>
                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-tool-panel/"
                                           className="btn btn-primary">Tool Panel</a>
                                    </div>
                                </div>
                            </div>
                            <div className="col-sm-8">
                                <div className="card">
                                    <div className="card-body">
                                        <h4 className="card-title">The Rest</h4>
                                        <p className="card-text">Pinned Columns, Checkbox Selection, Customer Renderers,
                                            Data
                                            Updates</p>
                                        <a target="_blank"
                                           href="https://www.ag-grid.com/best-react-data-grid/?framework=react"
                                           className="btn btn-primary">React with ag-Grid</a>
                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-pinning/"
                                           className="btn btn-primary">Pinned Column</a>
                                        <a target="_blank"
                                           href="https://www.ag-grid.com//javascript-grid-selection/#checkboxSelection"
                                           className="btn btn-primary">Checkbox Selection</a>
                                        <a target="_blank"
                                           href="https://www.ag-grid.com//javascript-grid-cell-rendering/"
                                           className="btn btn-primary">Cell
                                            Renderers</a>
                                        <a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/"
                                           className="btn btn-primary">Updating Data</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}