import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Charts, Resizable, ChartContainer, ChartRow, YAxis, LineChart, Brush } from 'react-timeseries-charts'
import { TimeSeries } from 'pondjs'

export default class Chart extends PureComponent {
    static propTypes = {
        height: PropTypes.number,
        margin: PropTypes.number
    }

    static defaultProps = {
        height: 500,
        margin: 20
    }

    constructor(props) {
        super(props)
        const series1 = new TimeSeries({
            name: 'rating',
            columns: ['time', 'value'],
            points: this.generateData(100, new Date(2017, 6, 1, 18, 30).getTime(), 1000)
        })
        const series2 = new TimeSeries({
            name: 'kek',
            columns: ['time', 'value'],
            points: this.generateData(100, new Date(2017, 6, 1, 18, 30).getTime(), 500)
        })
        this.state = {
            series1,
            series2,
            timeRange: series1.timerange(),
            brushRange: series1.timerange()
        }
    }

    randInt(min, max) {
        return Math.floor(Math.random() * ((max - min) + 1)) + min
    }

    generateData(n, date, rating) {
        const arr = []
        for (let i = 0; i < n; i += 1) {
            const newPoint = [
                arr.length ? arr[arr.length - 1][0] + (this.randInt(60, 60 * 24) * 60000) : date,
                arr.length ? arr[arr.length - 1][1] + this.randInt(-15, 15) : rating
            ]
            arr.push(newPoint)
        }
        return arr
    }

    handleTimeRangeChange = (range) => {
        if (range) {
            this.setState({ timeRange: range, brushRange: range })
        }
    }

    render() {
        return (
            <div>
                <Resizable>
                    <ChartContainer
                        enablePanZoom
                        onTimeRangeChanged={this.handleTimeRangeChange}
                        timeRange={this.state.timeRange}>
                        <ChartRow height='300'>
                            <YAxis
                                id='axis1'
                                width='60'
                                min={0}
                                max={Math.max(this.state.series1.max('value'), this.state.series2.max('value'))}
                                min={Math.min(this.state.series1.min('value'), this.state.series2.min('value'))}
                                tickCount={2}
                                type='linear'/>
                            <Charts>
                                <LineChart axis='axis1' series={this.state.series1}/>
                                <LineChart axis='axis1' series={this.state.series2}/>
                            </Charts>
                        </ChartRow>
                    </ChartContainer>
                </Resizable>
                <Resizable>
                    <ChartContainer
                        timeRange={this.state.series1.timerange()}>
                        <ChartRow height='70'>
                            <Brush
                timeRange={this.state.brushRange}
                allowSelectionClear
                onTimeRangeChanged={this.handleTimeRangeChange}
                            />
                            <YAxis
                                id='axis2'
                                width='60'
                                max={Math.max(this.state.series1.max('value'), this.state.series2.max('value'))}
                                min={Math.min(this.state.series1.min('value'), this.state.series2.min('value'))}
                                tickCount={2}
                                type='linear'/>
                            <Charts>
                                <LineChart axis='axis2' series={this.state.series1}/>
                                <LineChart axis='axis2' series={this.state.series2}/>
                            </Charts>
                        </ChartRow>
                    </ChartContainer>
                </Resizable>
            </div>
        )
    }
}