import React, { Component } from 'react';
import {ThemeProvider} from 'styled-components'
import {Offline} from "react-detect-offline";
import theme from './theme'
import {Header, Footer, SearchForm, Container, ContentWrapper, GradientWrapper, Results, Notiffication} from './containers'
import {ErrorFlex} from './components'
import {MainText} from './components/typography'

class App extends Component {
  state = {
      data: null,
      form_data: null
  }

  getData = (data, form_data) => {
      this.setState({data, form_data})
  }

  render() {
    return (
        <ThemeProvider theme={theme}>
          <GradientWrapper>
              <Container>
                  <ContentWrapper>
                      <Notiffication  
                        getData={this.getData}
                      />
                      <Header />
                        <Offline>
                          <ErrorFlex alignItems="center" justifyContent="center">
                            <MainText color="red" my={20} mx={20}>Ste offline, skontrolujte internetové pripojenie !</MainText>
                          </ErrorFlex>
                        </Offline>
                      <div>
                          <SearchForm 
                            getResults={(data) => this.setState({data})}
                            getFormData={(values) => this.setState({form_data: values})}
                          />
                          {this.state.data && <Results data={this.state.data} formValues={this.state.form_data} />}
                      </div>
                      <Footer />
                  </ContentWrapper>
              </Container>
          </GradientWrapper>
        </ThemeProvider>
    )
  }
}

export default App;
