import React from 'react';
import PropTypes from 'prop-types';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Icon from '@material-ui/core/Icon';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    MuiTabRoot: {
        textTransform: 'none',
        [theme.breakpoints.down('xs')]: {
            display: 'none',
        },
    },
    MuiTabWrapper: {
        flexDirection: 'row',
        [theme.breakpoints.down('sm')]: {
            flexDirection: 'column',
        },
    },
    MuiTabLabelIcon: {
        minHeight: '50px',
    },
    MuiIconRoot: {
        paddingLeft: '9px',
    },
});

class Stepper extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        tabs: PropTypes.array,
    };

    state = {
        value: 0,
    };

    handleChange = (event, value) => {
        this.setState({ value });
    };

    render() {
        const { tabs, classes } = this.props;
        return (
            <Tabs
                value={this.state.value}
                onChange={this.handleChange}
                indicatorColor={tabs.length > 1 ? 'primary' : ''}
                centered
            >
                {tabs.map(tab => {
                    return [
                        <Tab
                            classes={{
                                root: classes.MuiTabRoot,
                                wrapper: classes.MuiTabWrapper,
                                labelIcon: classes.MuiTabLabelIcon,
                            }}
                            key={tab.key}
                            label={tab.title}
                            icon={<Icon className={classes.MuiIconRoot}>{tab.icon}</Icon>}
                        />,
                    ];
                })}
            </Tabs>
        );
    }
}

export default withStyles(styles, { name: 'Stepper' })(Stepper);
