import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  ImageBackground,
  ScrollView
} from 'react-native';
var _ = require('lodash');
import { width, height } from '../../services/screen';
import { colors } from '../../assets/styles/colors-theme';
import Loading from '../../components/Loading';
import Toast, { DURATION } from 'react-native-easy-toast';
import { inject, observer } from "mobx-react"
import { Col, Grid, Row } from "react-native-easy-grid";
import TitleBar from '../../components/titleBar'
import { observable, makeObservable } from 'mobx'
import { WebView } from 'react-native-webview';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import ListTitle from '../../components/listTitle';
import I18n from '../../services/i18n'
import { s, vs, ms, mvs } from 'react-native-size-matters';
import { images } from '../../assets/images/imageIndex';
import RenderProducts from '../../components/renderProducts';
const Menu = inject("appStore")(observer(class Menu extends React.Component {

  activeSlide = 0;
  selected = null;
  subCatSelected = null;
  subcategory = []
  constructor(props) {
    super(props);
    this.store = props.appStore;
    makeObservable(this, {
      activeSlide: observable,
      selected: observable,
      subCatSelected: observable,
      subcategory: observable
    })
  }


  async componentWillMount() {
    this.selectCatAction(this.store.mainCategories[0].id, true)
  }

  selectCatAction(id, parent) {
    if (parent) {
      this.selected = id
      this.store.getcategoriesProducts(this.selected, this)
      this.subCatSelected = this.store.mainCategories[this.store.mainCategories.findIndex(e => e.id == id)].subCat[0].id
      this.subcategory = this.store.mainCategories[this.store.mainCategories.findIndex(e => e.id == id)].subCat
      console.log(this.subCatSelected)
    } else {
      this.subCatSelected = id
      this.store.getcategoriesProducts(this.subCatSelected, this)
    }
  }

  renderCategory() {
    return (
      <View style={{ height: s(30), width: width, backgroundColor: colors.catColor, marginTop: 10 }}>
        <ScrollView horizontal={true}>
          {this.store.mainCategories.map((item, index) => {
            return (
              <TouchableOpacity style={{ height: s(30), justifyContent: 'center', backgroundColor: this.selected == item.id ? '#F9F4EE' : colors.catColor }}
                onPress={() => { this.selectCatAction(item.id, item.parent === '') }}>
                <Text style={{ color: colors.fontColor, marginHorizontal: 20 }}>
                  {item.name}
                </Text>
              </TouchableOpacity>
            )
          })}
        </ScrollView>
      </View>
    )
  }

  renderSubCategory() {
    return (
      <View style={{ height: s(30), width: width, backgroundColor: colors.catColor,}}>
        <ScrollView horizontal={true}>
          {this.subcategory.map((item, index) => {
            return (
              <TouchableOpacity style={{ height: s(30), justifyContent: 'center', backgroundColor: this.subCatSelected == item.id ? '#F9F4EE' : colors.catColor }}
                onPress={() => { this.selectCatAction(item.id, item.parent === '') }}>
                <Text style={{ color: colors.fontColor, marginHorizontal: 20 }}>
                  {item.name.replace(/(\r\n|\n|\r)/gm, "")}
                </Text>
              </TouchableOpacity>
            )
          })}
        </ScrollView>
      </View>
    )
  }


  renderProduct(item) {

    return (
      <RenderProducts item={item} />
    )
  }

  renderProductsList() {
    if (this.store.allProducts.length > 0) {
      return (
        <View style={{ width: width, marginTop: 20 }}>
          {/* <View style={{ justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'row', height: 20 ,marginLeft:20}}>
            <Image source={images.titleLogo} />
            <Text style={{ color: colors.fontColor, fontWeight: '800', marginLeft: 10 }}>
            {I18n.t('homeFeatureProducts')}
            </Text>
          </View> */}
          {/* <ListTitle title={I18n.t('homeFeatureProducts')} /> */}
          <View style={{ height: 20 }} />
          {this.store.allProducts.map((items, index, array) => {
            const newRow = !(index % 2);
            const secondItem = index + 1 < array.length ? array[index + 1] : undefined;
            return (
              <View style={{ marginHorizontal: 10, }}>
                <Row key={items.id} style={{ width: '100%', justifyContent: 'space-between', marginTop: 10 }} >
                  {!!newRow ? (
                    <>
                      {this.renderProduct(items)}
                      {secondItem == undefined ? (<View style={{ width: s(170), height: s(210) }} />) : (this.renderProduct(secondItem))}
                    </>
                  ) : null}
                </Row>
              </View>
            )
          })}
        </View>
      )
    }
  }

  render() {
    return (

      <ImageBackground resizeMode='cover' style={{ flex: 1, backgroundColor: colors.bgc }} source={require('../../assets/images/background.png')} >
        <Loading loading={this.store.loading} />
        <TitleBar navigation={this.props.navigation} back={false} user={true} />
        <View style={{ width: width, alignItems: 'center', marginTop: 30, }}>
          <Text style={{ fontWeight: '800', color: colors.fontColor, fontSize: 15 }}>
            {I18n.t('menu')}
          </Text>
        </View>
        {this.renderCategory()}
        {this.renderSubCategory()}
        <ScrollView>
          {this.renderProductsList()}
        </ScrollView>
        <Toast
          ref="toast"
          style={{ backgroundColor: colors.mainColor }}
          position="center"
          positionValue={100}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: 'white' }}
        />
      </ImageBackground>

    );
  }
}))
const styles = StyleSheet.create({

});

export default Menu
