import React from 'react'
import PropTypes from 'prop-types'
import ChangePill from 'react-uikit/change-pill'

import Plot from 'react-plotly.js'
import {scatterData, scatterLayout} from './plotly.config'

import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

const PortfolioOverviewStatistic = ({label, amount, change}) => {
    const rootClassNames = bem.classNames('c-portfolio-overview-statistic')
    const labelClassNames = bem.classNames(
        'c-portfolio-overview-statistic__label'
    )
    const amountClassNames = bem.classNames(
        'c-portfolio-overview-statistic__amount'
    )

    return (
        <div className={rootClassNames}>
            <h4 className={labelClassNames}>{label}</h4>
            <p className={amountClassNames}>{amount || '––'}</p>
            {change && (
                <p>
                    <ChangePill
                        isPositive={
                            change.percent === 0
                                ? undefined
                                : change.percent > 0
                        }
                        value={`${change.percentDisplay}%`}
                    />
                </p>
            )}
        </div>
    )
}

PortfolioOverviewStatistic.propTypes = {
    amount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    change: PropTypes.shape({
        percent: PropTypes.number,
        percentDisplay: PropTypes.string,
    }),
    label: PropTypes.string,
}

class PortfolioOverviewGraph extends React.PureComponent {
    state = {
        data: [],
        layout: {},
        frames: [],
        selectedRange: [],
    }

    static getDerivedStateFromProps(nextProps) {
        return {
            data: [
                {
                    ...scatterData,
                    x: nextProps.data?.ts,
                    y: nextProps.data?.value,
                },
            ],
            layout: scatterLayout,
        }
    }

    onUpdate = (figure) => {
        if (!figure.layout.xaxis.range || !figure.layout.xaxis.range.length) {
            return
        }

        const rangeChanged =
            figure.layout.xaxis.range[0] !== this.state.selectedRange[0] ||
            figure.layout.xaxis.range[1] !== this.state.selectedRange[1]

        if (!rangeChanged) {
            return
        }

        this.setState({selectedRange: figure.layout.xaxis.range})
    }

    render() {
        const {lastDayExists} = this.props
        const rootClassNames = bem.classNames('c-portfolio-overview-graph')
        const headingClassNames = bem.classNames(
            'c-portfolio-overview-graph__heading'
        )
        const graphClassNames = bem.classNames(
            'c-portfolio-overview-graph__graph',
            {
                blank: !lastDayExists,
            }
        )

        const blankStateClassNames = bem.classNames(
            'c-portfolio-overview-graph__blank-state'
        )
        const blankStateMessageClassNames = bem.classNames(
            'c-portfolio-overview-graph__blank-state-message'
        )
        const blankState = (
            <div className={blankStateClassNames}>
                <p className={blankStateMessageClassNames}>
                    There is no graph data to display.
                    <br />
                    Start trading to build your portfolio.
                </p>
            </div>
        )

        return (
            <React.Fragment>
                <h3 className={headingClassNames}>Portfolio Market Value</h3>
                <div className={rootClassNames}>
                    {!lastDayExists && blankState}
                    <Plot
                        className={graphClassNames}
                        data={this.state.data}
                        layout={this.state.layout}
                        onUpdate={this.onUpdate}
                        useResizeHandler
                    />
                </div>
            </React.Fragment>
        )
    }
}

PortfolioOverviewGraph.propTypes = {
    data: PropTypes.object,
    lastDayExists: PropTypes.bool,
}

export default PortfolioOverviewGraph