/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React from 'react';
import { Icon, Text, Card, CardItem } from 'native-base';
import { Image, View, TouchableWithoutFeedback } from 'react-native';
import { withNavigation } from 'react-navigation';
import styles from './styles';

interface AccordionViewProps {
  productItems: any;
  selectedIndex: number | null;
  changeState: (index: any) => void;
  goforProductPage: (prod: any) => void;
}

const AccordionView = (props: AccordionViewProps) => {
  const { productItems, selectedIndex, changeState, goforProductPage } = props;
  return (
    <View>
      {productItems.map((item: any, index: number) => {
        return (
          <View key={index}>
            <TouchableWithoutFeedback onPress={() => changeState(index)}>
              <View style={styles.parentView}>
                <View style={styles.childImageView}>
                  <View style={styles.offerView}>
                    <Text style={styles.offerViewText}>{item.label}</Text>
                  </View>
                  <Image source={item.pic} style={styles.imageView} />
                </View>
                <View style={styles.nameDescriptionview}>
                  <Text style={styles.nameDescriptionviewText}>
                    {item.name}
                  </Text>
                  <Text
                    numberOfLines={1}
                    style={styles.nameDescriptionviewText1}
                  >
                    {item.desc}
                  </Text>
                </View>
                <View style={styles.accordianIconsView}>
                  {selectedIndex === index ? (
                    <Icon
                      style={styles.iconsview}
                      name="ios-arrow-up"
                      type="Ionicons"
                    />
                  ) : (
                    <Icon
                      style={styles.iconsview1}
                      name="ios-arrow-down"
                      type="Ionicons"
                    />
                  )}
                </View>
              </View>
            </TouchableWithoutFeedback>
            {selectedIndex === index && (
              <View style={styles.listView}>
                {item.children.map((products: any, i: number) => {
                  return (
                    <View key={i}>
                      <TouchableWithoutFeedback
                        onPress={() => goforProductPage(products)}
                      >
                        <Card style={styles.images}>
                          <CardItem style={styles.imageItem}>
                            <Image
                              source={products.image}
                              style={styles.imageStyle}
                            />
                          </CardItem>
                          <CardItem style={styles.nameItem}>
                            <Text style={styles.nameItemText}>
                              {products.name}
                            </Text>
                          </CardItem>
                          <CardItem style={styles.cardqtyItem}>
                            <Text style={styles.nameTextAdd}>
                              {products.off}
                            </Text>
                          </CardItem>
                        </Card>
                      </TouchableWithoutFeedback>
                    </View>
                  );
                })}
              </View>
            )}
          </View>
        );
      })}
    </View>
  );
};

export default withNavigation(AccordionView);
