import React, { Component } from 'react';
import { StyleSheet, View, Linking } from 'react-native';
import { connect } from 'react-redux';
import axios from 'axios';

import { API } from '../../API';
import { errorMessage } from '../../actions/Func'

import { Header, Fetch, Section } from '../../components';
import Item from './Item';

class Shop extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: [],
      fetching: true,
    }
  }
  componentDidMount(){
    this.getData()
  }
  getData(){
    const { auth_token } = this.props.main;
    axios({
      url: `${API}${'/api/shop'}`,
      headers: { 'Authorization': 'Basic ' + auth_token }
    })
      .then((res) => this.setState({fetching: false, data: res.data}))
      .catch((err) => {this.props.errorMessage(err); this.setState({fetching: false})})
  }
  render(){
    const { SHOP } = this.props.language.lang;
    const { data, fetching } = this.state;
    return(
      <View style={styles.container}>
        <Header title={SHOP} onPressLeft={() => this.props.onPressHamburger()} />

        {fetching ? <Fetch type={'flex'} /> :
          <View style={styles.content}>
            <Section extraData={data} sections={[{title: '', data: data}]}
              refreshFunc={() => this.getData()}
              itemFunc={(item, index) => {
                const ind = item.image.split('').indexOf('1');
                const slice_img = item.image.split('').slice(ind).join('');
                return(
                  <Item
                    key={index}
                    title={item.header}
                    image={API + '/download?name=' + slice_img}
                    price={item.currency + item.price}
                    onPress={() => Linking.openURL(item.link)}
                  />
                )
              }}
            />
          </View>
        }

      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee'
  },
  content: {
    flex: 1,
  }
});

const mapStateToProps = (state) => {
  return {
    main: state.main,
    language: state.language,
    home: state.home
  }
}

export default connect(mapStateToProps, { errorMessage })(Shop);