import React from 'react';
import { Flex } from 'grid-styled';
import { Divider, TabBar, Tab, Tabs, ThemeProvider } from 'styled-material-components';
import Box from '../core/Box';
import ProgressBar from '../loaders/ProgressBar';
import styled from 'styled-components';
import { childrenInsertProps } from '../utils/Utils';


const Bar = Flex.extend`
    width: 100%;
    height: 100%;
    justify-content: center;
`;

const Top = styled.div`
    width: 100%;
    height: ${props => props.theme.topBar.dimensions.topBarHeight};
    background-color: ${props => props.theme.topBar.colors.topBarColor};
`

const ContentLeft = Flex.extend`
    height: 100%;
`

const ContentRight = Flex.extend`
    height: 100%;
`

const DividerDefault = Divider.extend`
    margin-bottom: ${props => props.theme.defaultMargin}
`

const Logo = styled.img.attrs({
    src: props => props.logo
})`
    height: ${props => props.theme.topBar.logo.logoHeigth};
    width: ${props => props.theme.topBar.logo.logoWidth};
`;

const TabExtend = Tab.extend`
    max-height: ${props => props.theme.topBar.dimensions.topBarHeight};
    height: ${props => props.theme.topBar.dimensions.topBarHeight};
    min-width: ${props => props.theme.topBar.dimensions.topBarHeight};
`

//Estado padrão: Sem itens selecionados feito resetando showInkbar
//        
class TabsButton extends React.Component {
    state = {
      selectedIndex: 0,
      showInkbar: false
    };
  
    handleTabClick = (event, selectedIndex) => {
      this.setState({ selectedIndex: selectedIndex, showInkbar: true });
    };
  
    render() {
        const { selectedIndex, showInkbar } = this.state;
        const { theme, fixed, tabs, loading, determinateLoading } = this.props;

        const tabsRender = tabs.map((tab, index) => {
            if(typeof tab != 'object'){ 
                console.error('As tabs da TopBar são renderizadas com Componentes CustomIcon. Erro ao gerar Componente.');
                return <div key = {index}/>;
            }

            return <TabExtend key = {index} theme={theme}>{childrenInsertProps(tab, {theme: theme})}</TabExtend> ;
        });
  
      return (
        <React.Fragment>
          <Tabs fixed={fixed} theme={theme}>
            <TabBar onClick={this.handleTabClick} selectedIndex={selectedIndex} theme={theme} showInkbar={showInkbar}>
              { tabsRender }
            </TabBar>
          </Tabs>
        </React.Fragment>
      );
    }
  }

class TopBar extends React.Component{
    
    render(){
        const { theme, logo, children, loading, determinateLoading } = this.props;

        return(
            <Top theme={theme}>
                <Bar >
                    <Box theme={{...this.props.theme, boxBackgroundColor: 'transparent'}} justifyContent='space-between'>
                        <ContentLeft>
                            {logo ? <Logo theme= {theme}  logo={logo}/>: null}
                        </ContentLeft>
                        <ContentRight>
                            <ThemeProvider theme={{ accent: theme.colors.primary, ...theme}}>
                                <TabsButton fixed showIcon theme={theme} tabs={children} />
                            </ThemeProvider>
                        </ContentRight>
                    </Box>
                </Bar>
                {(loading || determinateLoading) && <ProgressBar theme = {theme} value={determinateLoading} variant={determinateLoading? "determinate":"indeterminate"} />}
                <DividerDefault theme = {theme}/>
            </Top>
        );
    }
}

export default TopBar;
