import React from 'react'
import { View, Text, AppState, TouchableHighlight, Image } from 'react-native'

import {
  createCost,
  listCosts,
  deleteCosts,
  listCategorys,
  deleteCategorys
} from './storage'
import sync from './sync'

import Category from './components/Category'
import Header from './components/Header'
import TextInput from './components/TextInput'
import Actions from './components/Actions'

import { primary, accented } from './style'

class App extends React.Component {
  state = {
    categorys: [],
    category: '',
    cost: '',
    newCategory: false,
    costCount: listCosts().length
  }

  render() {
    const { categorys, category, cost, newCategory } = this.state
    const isValidCost = category !== '' && cost !== ''

    return (
      <View>
        <Header />
        <TextInput
          onChangeText={cost => this.setState({ cost })}
          value={cost}
          placeholder="Cost"
          keyboardType="numeric"
        />
        <View
          style={{
            flexWrap: 'wrap',
            flexDirection: 'row',
            justifyContent: 'space-around'
          }}
        >
          {categorys.length > 0
            ? categorys
                .slice(0, 8)
                .map(category =>
                  <Category
                    onPress={() =>
                      this.setState({ category, newCategory: false })}
                    name={category}
                    key={category}
                    selected={this.state.category}
                  />
                )
            : <Text>Please connect to costa to view categories</Text>}
        </View>
        <View
          style={{
            alignItems: 'flex-end',
            marginTop: 15
          }}
        >
          {!newCategory &&
            <TouchableHighlight
              style={{
                backgroundColor: primary,
                borderRadius: 5,
                borderWidth: 1,
                padding: 5,
                justifyContent: 'center',
                shadowOffset: { width: 3, height: 3 },
                shadowRadius: 3,
                shadowOpacity: 1,
                shadowColor: '#ccc',
                marginRight: 30
              }}
              onPress={() => this.setState({ newCategory: true, category: '' })}
              underlayColor={accented}
            >
              <View style={{ flexDirection: 'row' }}>
                <Image
                  style={{ height: 20, width: 20, marginRight: 5 }}
                  source={require('./images/plus.png')}
                />
                <Text>Add Category</Text>
              </View>
            </TouchableHighlight>}
        </View>
        {newCategory &&
          <TextInput
            value={category}
            placeholder="New Category"
            onChangeText={category => this.setState({ category })}
          />}
        <View
          style={{
            alignItems: 'center',
            marginTop: 15
          }}
        >
          <Actions
            newCost={isValidCost}
            onAction={
              isValidCost
                ? () => {
                    createCost({ cost: parseFloat(cost), category })
                    this.syncCosts()
                    this.setState({
                      cost: '',
                      category: '',
                      costCount: listCosts().length,
                      newCategory: false
                    })
                  }
                : this.syncCosts
            }
            costCount={listCosts().length}
          />
        </View>
      </View>
    )
  }

  syncCosts = () => {
    sync({ costs: listCosts(), update: this.setState.bind(this) })
      .then(isSynced => {
        this.setState({ costCount: listCosts().length })
        if (isSynced) {
          deleteCosts()
          deleteCategorys()
        } else {
          this.setState({
            categorys: Object.keys(listCategorys())
              .map(categoryKey => listCategorys()[categoryKey])
              .map(({ name }) => name)
          })
        }
      })
      .catch(err => console.error(`Could not sync costs due to ${err}`))
  }

  componentDidMount() {
    this.syncCosts()
    AppState.addEventListener('change', appState => {
      if (appState === 'active') {
        this.syncCosts()
      }
    })
  }
}

export default App

@@ -3874,22 +3874,120 @@
    %7D
- else %7B
 %0A      
+%7D)%0A      .catch(err =%3E console.error(%60Could not sync costs due to $%7Berr%7D%60))%0A  %7D%0A%0A  componentDidMount() %7B%0A
     
@@ -3998,30 +3998,24 @@
 .setState(%7B%0A
-      
       catego
@@ -4048,38 +4048,32 @@
 orys())%0A        
-  
-    
 .map(categoryKey
@@ -4110,30 +4110,24 @@
 y%5D)%0A        
-      
 .map((%7B name
@@ -4147,137 +4147,10 @@
     
-      %7D)%0A        %7D%0A      %7D)%0A      .catch(err =%3E console.error(%60Could not sync costs due to $%7Berr%7D%60))%0A  %7D%0A%0A  componentDidMount() %7B
+%7D)
 %0A   

Load old categories immediately