import React from 'react';
import ReactDom from 'react-dom';

import TopBar from './expectrum/layout/TopBar';
import CustomIcon from './expectrum/icons/CustomIcon';
import RangeSlider from './expectrum/slider/RangeSlider';

import {Avatar, Icon} from 'styled-material-components';

import App from './expectrum/core/App';
import Container from './expectrum/core/Container';
import Box from './expectrum/core/Box';
import Input from './expectrum/text/Input';
import Select from './expectrum/text/Select';
import Buttom from './expectrum/interactive/Buttom';
import PlanCard from './expectrum/interactive/PlanCard';
import Flex from './expectrum/core/Flex';

import SectionLogin from './expectrum/core/SectionLogin';
import BackgroundLogin from './expectrum/core/BackgroundLogin';

import { RemoveRedEyeIcon } from 'styled-material-components';


class ViewerTeste extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            page: 'login'
        }
    }
    render(){
        
        return(
            this.state.page === 'login' ?
                <App theme={{appBackgroundColor: 'gray'}}>
                    <Container alignItems='flex-start'>
                            <SectionLogin>
                                <Input
                                    placeholder="CPF"
                                    width='100%'
                                    errorText={'CPF Inválido'}
                                    error
                                    mask='CPF'
                                />
                                <Input
                                    placeholder="Senha"
                                    suffix={<RemoveRedEyeIcon  />}
                                    width='100%'
                                    errorText={'Usuário ou senha invalidos'}
                                    required
                                />
                                <Buttom raised width='100%' onClick={()=>this.setState({page:'oferta'})}>
                                    ENTRAR
                                </Buttom>
                            </SectionLogin>
                    </Container>
                </App>
            :

                <App theme={{appBackgroundColor: 'gray', containerBackgroundColor: 'white'}}>
                    <Container alignItems='flex-start'>
                        <TopBar logo='./logo.svg' loading>
                            <CustomIcon icon='star' badgeCounter='7'/>
                            <CustomIcon text='Text' badgeCounter='99' extraIcon='arrow_drop_down'/>
                            <CustomIcon url='./ico_shopppingcart.svg' badgeCounter='10'/>
                            <CustomIcon username='Guilherme Bohnstedt' extraIcon='arrow_drop_down'/>
                            <CustomIcon icon='arrow_drop_down' extraIcon='arrow_drop_down'/>
                        </TopBar>
                        <Box >
                            <Select options={['SP', 'RJ']} />
                            <Select options={['11', '15']} />
                            <Flex w={1} justifyContent='space-between' flexWrap='wrap'>
                                <PlanCard
                                    w='300px'
                                    firstText='GG'
                                    principalText='20GB'
                                    descriptionText='3GB+2GB de Bônus'
                                    de='R$69,99'
                                    para='R$69,99'
                                    destaque='Melhor oferta'
                                    addClick={(e) => {}}
                                    infoClick={(e) => {}}
                                />
                                <PlanCard
                                    firstText='GG'
                                    principalText='5GB'
                                    descriptionText='3GB+2GB de Bônus'
                                    para='R$69,99'
                                />
                            </Flex>
                        </Box>
                    </Container>
                </App>
            
        )
    }
}

window.onload = () => {
    var root = document.createElement('div');
    document.body.appendChild(root);

    ReactDom.render(
        <div>
            <ViewerTeste />
        </div>,
        root
    );
}
