/**
 * 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 { Image, ScrollView } from 'react-native';
import {
  Container,
  Content,
  Card,
  CardItem,
  Text,
  Body,
  Left,
  Right,
  Button,
} from 'native-base';
import products from '../../../Database/grocery/data';
import Swipercomponent from '../../../components/grocery/swiper';
import Headercontent from '../../../components/grocery/header';
import styles from './homeStyles';
import AccordionView from '../../../components/grocery/accordianCardsList';
import AddRemoveCounterComponent from '../../../components/grocery/cartAddRemoveItems';

const addressLocation = 'D-84 D-Block';

interface HomeViewProps {
  selectedIndex: number | null;
  subtractCount: (first: number, second: number, count: number) => void;
  remove: string;
  addCount: (first: number, second: number) => void;
  toggleDrawer: () => void;
  goToMyCart: () => void;
  goToSearch: () => void;
  goforProductDetailPage: (item: any) => void;
  goToViewAll: (data: any, index: number) => void;
  gotoAddItems: (first: number, second: number) => void;
  changeStateFunction: (index: number) => void;
  goforProductPage: (item: any) => void;
  products: Array<any>;
  inCartLength: any;
  add: string;
}

const HomeView = (props: HomeViewProps) => {
  const { selectedIndex, subtractCount, remove, addCount, add } = props;
  return (
    <Container>
      <Headercontent
        name={'bars'}
        onPress={() => props.toggleDrawer()}
        loginTitle={'Delivery Location'}
        type={'FontAwesome'}
        rightIcon={'shopping-cart'}
        rightType={'FontAwesome'}
        stylesRight={styles.rightIcon}
        onPressToCart={() => props.goToMyCart()}
        addressTitle={addressLocation}
        iconName={'md-create'}
        iconType={'Ionicons'}
        searchIcon={'search'}
        searchIconType="Ionicons"
        onPressToSearch={() => props.goToSearch()}
        editIcon={styles.editIcon}
        productNumber={props.inCartLength}
      />
      <Content padder>
        {props.products.map((data, i) => {
          return (
            <Card key={i}>
              <CardItem header>
                <Left>
                  <Text style={styles.headingLeftItem}>{data.headingLeft}</Text>
                </Left>
                <Right>
                  <Button
                    bordered
                    style={styles.outlineOfferButtons}
                    onPress={() => props.goToViewAll(data, i)}
                  >
                    <Text style={styles.borderedButtonText}>
                      {data.headingRight}
                    </Text>
                  </Button>
                </Right>
              </CardItem>
              <Body>
                <ScrollView
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  showsVerticalScrollIndicator={false}
                >
                  {data.products.map((productItems: any, index: number) => {
                    return (
                      <Card style={styles.cardStyle} key={index}>
                        <CardItem style={styles.cardItem}>
                          <Left>
                            <Button
                              success
                              style={styles.offerButtons}
                              onPress={() =>
                                props.goforProductDetailPage(productItems)
                              }
                            >
                              <Text>{productItems.off}</Text>
                            </Button>
                          </Left>
                        </CardItem>
                        <CardItem
                          button
                          style={styles.imageItem}
                          onPress={() =>
                            props.goforProductDetailPage(productItems)
                          }
                        >
                          <Image
                            source={productItems.image}
                            style={styles.imageStyle}
                          />
                        </CardItem>
                        <CardItem style={styles.rateItem}>
                          <Text>{productItems.salePrice}</Text>
                          <Text style={styles.crossedText}>
                            {productItems.regularPrice}
                          </Text>
                        </CardItem>
                        <CardItem style={styles.nameItem}>
                          <Text style={styles.nameItemText}>
                            {productItems.name}
                          </Text>
                        </CardItem>
                        <CardItem style={styles.cardqtyItem}>
                          <Text>{productItems.qty}</Text>
                        </CardItem>
                        <CardItem style={styles.footerButton}>
                          {productItems.units < 1 ? (
                            <Button
                              block
                              style={styles.footerButtonContent}
                              onPress={() => props.gotoAddItems(i, index)}
                            >
                              <Text>Add</Text>
                            </Button>
                          ) : (
                            <AddRemoveCounterComponent
                              subtractCount={() =>
                                subtractCount(i, index, productItems.units)
                              }
                              remove={remove}
                              text={productItems.units}
                              addCount={() => addCount(i, index)}
                              add={add}
                            />
                          )}
                        </CardItem>
                      </Card>
                    );
                  })}
                </ScrollView>
              </Body>
            </Card>
          );
        })}
        <Swipercomponent
          images={products.images}
          swiperCards={styles.swiperCards}
          backgroundImage={styles.backgroundImage}
          imageStyleSwiper={styles.imageStyleSwiper}
          swiperView={styles.swiperView}
          contentContainer={undefined}
        />
        <AccordionView
          productItems={products.items}
          changeState={(i) => props.changeStateFunction(i)}
          selectedIndex={selectedIndex}
          goforProductPage={(item) => props.goforProductPage(item)}
        />
      </Content>
    </Container>
  );
};
export default HomeView;
