/*This is an Example of React Native Add Items to ScrollView using Loop*/
import React, { Component } from 'react';
//import react in our project

import {
  View,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  CheckBox,
} from 'react-native';

//import all the components we needed

export default class App extends Component {
  constructor() {
    super();
    //Array of Item to add
    this.itemsA = [
      {
        Descricao: 'PAO_',
        Tipo: 'COMPOSIÇÃO',
        Valor: 0,
        chkcomp: 1,
        id_produto: 9202,
      },
      {
        Descricao: 'BACON',
        Tipo: 'COMPOSIÇÃO',
        Valor: 0,
        chkcomp: 1,
        id_produto: 9199,
      },
      {
        Descricao: 'FATIA DE QUEIJO',
        Tipo: 'COMPOSIÇÃO',
        Valor: 0,
        chkcomp: 1,
        id_produto: 9200,
      },
      {
        Descricao: 'PRESUNTO FATIADO',
        Tipo: 'COMPOSIÇÃO',
        Valor: 0,
        chkcomp: 1,
        id_produto: 9203,
      },
      {
        Descricao: 'CARNE DE HAMBURGUER',
        Tipo: 'COMPOSIÇÃO',
        Valor: 0,
        chkcomp: 1,
        id_produto: 9201,
      },
      {
        Descricao: 'CARNE DE HAMBURGUER',
        Tipo: 'OPCIONAL',
        Valor: 5,
        chkcomp: 0,
        id_produto: 9201,
      },
      {
        Descricao: 'FATIA DE QUEIJO',
        Tipo: 'OPCIONAL',
        Valor: 1,
        chkcomp: 0,
        id_produto: 9200,
      },
      {
        Descricao: 'PRESUNTO FATIADO',
        Tipo: 'OPCIONAL',
        Valor: 1,
        chkcomp: 0,
        id_produto: 9203,
      },
      {
        Descricao: 'BACON',
        Tipo: 'OPCIONAL',
        Valor: 5,
        chkcomp: 0,
        id_produto: 9199,
      },
    ];

    this.state = {
      items: [
        {
          Descricao: 'PAO_',
          Tipo: 'COMPOSIÇÃO',
          Valor: 0,
          chkcomp: 1,
          id_produto: 9202,
        },
        {
          Descricao: 'BACON',
          Tipo: 'COMPOSIÇÃO',
          Valor: 0,
          chkcomp: 1,
          id_produto: 9199,
        },
        {
          Descricao: 'FATIA DE QUEIJO',
          Tipo: 'COMPOSIÇÃO',
          Valor: 0,
          chkcomp: 1,
          id_produto: 9200,
        },
        {
          Descricao: 'PRESUNTO FATIADO',
          Tipo: 'COMPOSIÇÃO',
          Valor: 0,
          chkcomp: 1,
          id_produto: 9203,
        },
        {
          Descricao: 'CARNE DE HAMBURGUER',
          Tipo: 'COMPOSIÇÃO',
          Valor: 0,
          chkcomp: 1,
          id_produto: 9201,
        },
        {
          Descricao: 'CARNE DE HAMBURGUER',
          Tipo: 'OPCIONAL',
          Valor: 5,
          chkcomp: 0,
          id_produto: 9201,
        },
        {
          Descricao: 'FATIA DE QUEIJO',
          Tipo: 'OPCIONAL',
          Valor: 1,
          chkcomp: 0,
          id_produto: 9200,
        },
        {
          Descricao: 'PRESUNTO FATIADO',
          Tipo: 'OPCIONAL',
          Valor: 1,
          chkcomp: 0,
          id_produto: 9203,
        },
        {
          Descricao: 'BACON',
          Tipo: 'OPCIONAL',
          Valor: 5,
          chkcomp: 0,
          id_produto: 9199,
        },
      ],
    };
  }

  /** TROCA O STATE DA COMPOSIÇÃO */

  onUpdateItem(item) {

    this.setState({
      items: this.state.items.map(i => {
      let checked = i.id_produto === item.id_produto ?  !i.checked  : i.checked;

      return {
          ...i,
          checked
        }
      })
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          {/*Loop of JS which is like foreach loop*/}
          {this.state.items.map((item, key) => (
            //key is the index of the array
            //item is the single item of the array
            <View key={key} style={styles.item}>
              <TouchableOpacity onPress={() => this.onUpdateItem(item)}>
                <View style={styles.text}>
                  <CheckBox value={item.checked} />
                  <Text>{item.Descricao}</Text>
                </View>
              </TouchableOpacity>
              <View style={styles.separator} />
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
  },

  separator: {
    height: 1,
    backgroundColor: '#707080',
    width: '100%',
  },
  text: {
    fontSize: 16,
    color: '#606070',
    padding: 10,
  },
});