import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  ScrollView,
  FlatList,
  TouchableOpacity,
  ToastAndroid,
  StatusBar
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MainToolbar from "./../../components/MainToolbar";
import Barang from "./../../components/Barang";
import commonStyles from "./../../common_styles";
import RealmSchemas from "./../../realm/RealmSchemas";
import DataService from "./../../realm/DataService";

const ToolbarRightContent = ({ goToFormInsert }) => (
  <TouchableOpacity
    activeOpacity={0.7}
    onPress={goToFormInsert}
  >
    <Ionicons name="ios-add" size={28} color="#FFF" />
  </TouchableOpacity>
);

class ViewScreen extends Component {
  state = {
    barang: DataService.findAll('Barang'),
    barangFiltered: DataService.findAll('Barang'),
    q: ""
  };
  componentDidMount() {
    this.didFocusListener = this.props.navigation.addListener(
      'didFocus',
      () => this.setState({ barang: DataService.findAll('Barang') })
    );
  }
  componentWillUnmount() {
    this.didFocusListener.remove();
  }
  _renderToolbar() {
    return (
      <MainToolbar
        _onBackPress={() => this.props.navigation.goBack()}
        title={'Lihat Barang'}
        hasBackButton
        rightContent={<ToolbarRightContent goToFormInsert={() => this.props.navigation.navigate("formInsertBarang")} />}
      />
    );
  }
  _renderBarang() {
    return (
      <FlatList
        ref={(ref) => { this.flatListRef = ref; }}
        contentContainerStyle={this.state.barangFiltered.length === 0 && { paddingTop: 10, justifyContent: 'center', alignItems: 'center' }}
        showsVerticalScrollIndicator={false}
        data={this.state.barangFiltered}
        keyExtractor={(item, index) => `barang-${index}`}
        renderItem={({ item, index }) => <Barang
          item={item}
          index={index}
          navigation={this.props.navigation}
          duplicateBarang={(item) => this._duplicateBarang(item)}
          deleteBarang={(item) => this._deleteBarang(item)}
        />}
        ListEmptyComponent={<Text style={{ fontSize: 16, fontWeight: '400' }}>List is empty</Text>}
        getItemLayout={(data, index) => { return {length: 200, index, offset: 200 * index} }}
      />
    );
  }
  _renderSearchBox() {
    const { q } = this.state;
    return (
      <View style={commonStyles.searchContainer}>
        <View style={commonStyles.searchBox}>
          <View style={commonStyles.searchLeft}>
            <FontAwesome
              style={commonStyles.searchIcon}
              name="search"
              size={20}
              color="#616161"
            />
          </View>
          <View style={commonStyles.searchRight}>
            <TextInput
              value={q}
              style={commonStyles.searchInput}
              underlineColorAndroid="transparent"
              placeholder={'Search'}
              onChangeText={q => this._search(q)}
            />
          </View>
        </View>
      </View>
    );
  }
  _search(q) {
    const { barang } = this.state;

    q = q.toLowerCase();
    const result = barang.filter(barang => String(barang['nama']).toLowerCase().includes(q));
    this.setState({ q, barangFiltered: result });
  }
  _deleteBarang(item = null) {
    if (item != null) {
      DataService.delete(item);
      ToastAndroid.show("Delete success", ToastAndroid.SHORT);

      this.setState({ barang: DataService.findAll('Barang') });
    }
  }
  _duplicateBarang(item = null) {
    if (item != null) {
      const id = RealmSchemas.objects('Barang').length + 1;

      var obj = {
        id,
        kode: `${item.nama.substring(0, 2).toUpperCase()}${id}`,
        nama: item.nama,
        nama_toko: item.nama_toko,
        harga_beli: item.harga_beli,
        harga_jual: item.harga_jual,
        foto: Array.from(item.foto),
        keterangan: item.keterangan
      };

      DataService.save('Barang', obj);

      ToastAndroid.show("Duplicate success", ToastAndroid.SHORT);

      this.setState({ barang: DataService.findAll('Barang') });
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#0035C9" barStyle="light-content" />
        {this._renderToolbar()}
        {this._renderSearchBox()}
        <ScrollView
          contentContainerStyle={{ paddingBottom: 8 }}
          style={{ flex: 1, padding: 8 }}
          showsVerticalScrollIndicator={false}
        >
          {this._renderBarang()}
        </ScrollView>
        <TouchableOpacity
          activeOpacity={0.7}
          style={styles.fab}
          onPress={() => this.flatListRef.scrollToEnd()}
        >
          <Ionicons name="ios-add" size={32} color="#0035C9" />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  fab: {
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
    width: 70,
    height: 70,
    position: 'absolute',
    right: 10,
    top: 10,
    backgroundColor: '#FFF',
    borderRadius: 100
  }
});

export default ViewScreen;