import React from 'react';
import PropTypes from 'prop-types';
import {
    Tabs, Tab, AppBar, Box
} from '@material-ui/core';
import TimelineIcon from '@material-ui/icons/Timeline';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import CommentOutlinedIcon from '@material-ui/icons/CommentOutlined';

import './stock-details.scss';
import { tickerService } from '../../services/generic-service';
import StockFigure from './stock-figure/stock-figure'
import BasicInfo from './basic-info/basic-info'
import CompanyNews from './company-news/company-news'

class StockDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ticker: '',
            tabIndex: 0,
        };
        this.props = props;
        this.handleTabChange = this.handleTabChange.bind(this);
    }

    componentDidMount() {
        this.tickerSubscription = tickerService.getTicker().subscribe(ticker => {
            if (ticker) {
                this.setState({ ticker: ticker });
            } else {
                this.setState({ ticker: '' });
            }
        });
    }

    componentWillUnmount() {
        this.tickerSubscription.unsubscribe();
    }

    handleTabChange = (event, newTabIndex) => {
        this.setState({ tabIndex: newTabIndex });
    };

    render() {
        return (
            <div className="stock-details-inner-wrapper">
                <AppBar position="static" color="default">
                    <Tabs
                        variant="scrollable"
                        value={this.state.tabIndex}
                        onChange={this.handleTabChange}
                        TabIndicatorProps={{ style: { background: '#6200EE' } }}
                    >
                        <Tab label="Chart"  icon={<TimelineIcon />} {...a11yProps(0)} />
                        <Tab label="Basic Info" disabled={!!!this.state.ticker} icon={<InfoOutlinedIcon />}{...a11yProps(1)} />
                        <Tab label="News" disabled={!!!this.state.ticker} icon={<CommentOutlinedIcon />}{...a11yProps(2)} />
                    </Tabs>
                </AppBar>

                <TabPanel value={this.state.tabIndex} index={0}>
                    <StockFigure />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={1}>
                    <BasicInfo />
                </TabPanel>
                <TabPanel value={this.state.tabIndex} index={2}>
                    <CompanyNews />
                </TabPanel>
            </div>
        );
    }
};

export default StockDetails;

function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`scrollable-auto-tabpanel-${index}`}
            aria-labelledby={`scrollable-auto-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box p={3}>
                    {children}
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `scrollable-auto-tab-${index}`,
        'aria-controls': `scrollable-auto-tabpanel-${index}`,
    };
}