import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import * as _ from 'lodash';
import { Grid } from '@material-ui/core';

import './data-grid.scss';
import { tickerService } from '../../services/generic-service'

let rawData = require('../../rawData/mergedData.json');

// eslint-disable-next-line
Array.prototype.swapElements = function (a, b) {
    this[a] = this.splice(b, 1, this[a])[0];
    return this;
}

class DataGrid extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: window.innerWidth,
            height: window.innerHeight,
        };
        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
    }

    getColumnDefs(rawData) {
        const columnDefs = [];
        const columnNamesInOrder = Object.keys(this.massageRawData(rawData)[0]).swapElements(0, 1);
        // eslint-disable-next-line
        columnNamesInOrder.map(x => {
            let genericColDef = {
                field: x,
            };
            let specificColDef = {};
            switch (x) {
                case 'Date':
                    specificColDef = {
                        width: this.state.width / 12,
                        minWidth: 120,
                    }
                    break
                case 'Direction':
                case 'CUSIP':
                case 'Shares':
                case '% Of ETF':
                case 'Ticker':
                    specificColDef = {
                        width: this.state.width / 12,
                        minWidth: 100,
                    }
                    break
                case 'FUND':
                    specificColDef = {
                        width: this.state.width / 12,
                        minWidth: 90,
                    }
                    break
                case 'Name':
                    specificColDef = {
                        width: this.state.width / 4,
                    }
                    break
                default:
                    specificColDef = {
                        width: this.state.width / 8,
                        minWidth: 100,
                    };
                    break;
            }
            columnDefs.push(Object.assign(genericColDef, specificColDef));
        })
        return columnDefs;
    }

    massageRawData(rawData) {
        let tempData = _.cloneDeep(rawData);
        // remove empty property
        // eslint-disable-next-line
        tempData.map(x => {
            for (let key in x) {
                if (key === '') {
                    delete x[key];
                }
            }
        })
        return tempData;
    }

    componentDidMount() {
        this.updateWindowDimensions();
        window.addEventListener('resize', this.updateWindowDimensions);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.updateWindowDimensions);
    }

    updateWindowDimensions() {
        this.setState({ width: window.innerWidth, height: window.innerHeight });
    }

    onRowClicked(e) {
        if (e && e.data && e.data.Ticker) {
            tickerService.changeTicker(e.data.Ticker);
        }
    }

    render() {
        const dataGridDef = {
            defaultColDef: {
                resizable: true,
                sortable: true,
                filter: 'agTextColumnFilter',
                floatingFilter: true
            },
            columnDefs: this.getColumnDefs(rawData),
            rowData: this.massageRawData(rawData),
            paginationPageSize: 20
        }
        return (
            <Grid container justify="center" alignItems="center">
                <Grid item xs={12} className={['ag-theme-alpine', 'center'].join(' ')}>
                    <AgGridReact
                        rowData={dataGridDef.rowData}
                        columnDefs={dataGridDef.columnDefs}
                        defaultColDef={dataGridDef.defaultColDef}
                        // paginationAutoPageSize={true}
                        paginationPageSize={dataGridDef.paginationPageSize}
                        pagination={true}
                        onRowClicked={this.onRowClicked.bind(this)}
                    >
                    </AgGridReact>
                </Grid>
            </Grid>
        );
    }
};

export default DataGrid;