import React from 'react'
import PropTypes from 'prop-types'
import TabsWithSlider from 'react-uikit/tabs/with-slider'
import moment from 'moment'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

import CompanyFinancialsAnnuals from './partials/company-financials-annuals'
import CompanyFinancialsQuarter from './partials/company-financials-quarter'
class CompanyFinancials extends React.PureComponent {
    state = {activeTab: 1, withFinancials: false}

    static getDerivedStateFromProps(nextProps) {
        if (
            nextProps.financials &&
            nextProps.financials.quarterlies &&
            nextProps.financials.quarterlies.length > 0 &&
            nextProps.financials.annuals &&
            nextProps.financials.annuals.head &&
            nextProps.financials.annuals.head.length > 0
        ) {
            const year = nextProps.financials.annuals.head[1].value
            const quarterlies = nextProps.financials.quarterlies.map(
                (quarter) => {
                    return {
                        value: quarter.date,
                        label: moment(quarter.date).format('MMM YYYY'),
                    }
                }
            )

            const tabs = [{value: year, label: 'ANNUAL'}, ...quarterlies]
            return {
                withFinancials: true,
                tabs,
            }
        }

        return null
    }

    onTabSelected = ({index}) => {
        this.setState({activeTab: index})
    }

    get quarter() {
        return this.props.financials.quarterlies[this.state.activeTab - 1]
    }

    render() {
        const blankStateClassNames = bem.classNames(
            'c-company-financials__blank-state'
        )
        const headingClassNames = bem.classNames(
            'c-company-financials__heading'
        )
        const sectionClassNames = bem.classNames(
            'c-company-financials__section'
        )
        const tabsClassNames = bem.classNames('c-company-financials__tabs')
        const tableClassNames = bem.classNames('c-company-financials__table')

        if (!this.state.withFinancials) {
            return (
                <p className={blankStateClassNames}>
                    Financial data for {this.props.stock.displayName} is
                    currently unavailable.
                    <br />
                    We will be adding more data in the future.
                </p>
            )
        }

        return (
            <React.Fragment>
                <h1 className={headingClassNames}>Financials</h1>
                <section className={sectionClassNames}>
                    <TabsWithSlider
                        activeIndex={this.state.activeTab}
                        onItemSelected={this.onTabSelected}
                        items={this.state.tabs}
                        className={tabsClassNames}
                    >
                        <TabsWithSlider.Items />
                        <TabsWithSlider.Slider />
                    </TabsWithSlider>
                    <table className={tableClassNames}>
                        {this.state.activeTab === 0 ? (
                            <CompanyFinancialsAnnuals
                                annuals={this.props.financials.annuals}
                            />
                        ) : (
                            <CompanyFinancialsQuarter quarter={this.quarter} />
                        )}
                    </table>
                </section>
            </React.Fragment>
        )
    }
}

CompanyFinancials.propTypes = {
    financials: PropTypes.shape({
        annuals: PropTypes.object,
        quarterlies: PropTypes.array,
    }),
    stock: PropTypes.shape({
        currency: PropTypes.string,
        displayName: PropTypes.string,
        id: PropTypes.string,
    }),
    timeseries: PropTypes.object,
}

export default CompanyFinancials