/**
 * 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 Swipercomponent from '../../../components/redux/swiper';
import Headercontent from '../../../components/redux/header';
import styles from './homeStyles';
import AccordionView from '../../../components/redux/accordianCardsList';
import AddToCartButton from '../../../components/redux/addToCartButton';
import Spinner from 'react-native-loading-spinner-overlay';
// import AccordionCustomHeaderContent from '../../../components/redux/accordianCardsList';
// import AccordionView from '../../../components/redux/accordianCardsList';

// import { ScrollView } from 'react-native-gesture-handler';
const addressLocation = 'D-84 D-Block'

interface HomeViewProps {
    selectedIndex: number;
    accordionData: Array<any>;
    sliderData: Array<any>;
    cartItemLength: number;
    products: Array<any>;
    spinner: boolean;
    goToMyCart: () => void;
    goforProductPage: (title:string, products:any) => void;
    toggleDrawer: () => void;
    goToViewAll: (products:any) => void;
    goforProductDetailPage: (product:any) => void;
    changeStateFunction: (index:number) => void;
}

const HomeView = (props:HomeViewProps) => {
    const {
        selectedIndex,
        accordionData,
        sliderData,
        goforProductPage,
        cartItemLength,
        products,
        toggleDrawer,
        goToMyCart,
        goToViewAll,
        goforProductDetailPage,
        changeStateFunction,
        spinner } = props
    return (
        <Container>
            <Headercontent
                name={'bars'}
                onPress={toggleDrawer}
                loginTitle={'Delivery Location'}
                type={'FontAwesome'}
                rightIcon={'shopping-cart'}
                cartItemLength= {cartItemLength}
                rightType={'FontAwesome'}
                stylesRight={styles.rightIcon}
                onPressToCart={goToMyCart}
                addressTitle={addressLocation}
                iconName={'create'}
                iconType={'Ionicons'}
                editIcon={styles.editIcon}
            />
            <Content padder>
                {products.map((data, i) => {
                    return (
                        <Card key={i}>
                            <CardItem header>
                                <Left>
                                    <Text style={styles.headingLeftItem} >{data.headingLeft}</Text>
                                </Left>
                                <Right>
                                    <Button bordered danger style={styles.offerButtons} onPress={() => goToViewAll(data.products)}>
                                        <Text>{data.headingRight}</Text>
                                    </Button>
                                </Right>
                            </CardItem>
                            <Body>
                                <ScrollView
                                    horizontal
                                    showsHorizontalScrollIndicator={false}
                                    showsVerticalScrollIndicator={false}
                                >
                                    {data.products.map((productItems, index) => {
                                        return (
                                            <Card style={styles.cardStyle} key={index}>
                                                <CardItem
                                                    style={styles.cardItem}
                                                >
                                                    <Left>
                                                        <Button
                                                            success
                                                            style={styles.offerButtons}
                                                            onPress={() => goforProductDetailPage(productItems)}
                                                        >
                                                            <Text>
                                                                {productItems.off}
                                                            </Text>
                                                        </Button>
                                                    </Left>
                                                </CardItem>
                                                <CardItem
                                                    button
                                                    style={styles.imageItem}
                                                    onPress={() => 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}
                                                >
                                                    <AddToCartButton productId={productItems.id} productQty={productItems.units} product={productItems} />
                                                </CardItem>
                                            </Card>
                                        )
                                    })}
                                </ScrollView>
                            </Body>
                        </Card>
                    )
                })}
                <Swipercomponent
                    images={sliderData}
                    swiperCards={styles.swiperCards}
                    backgroundImage={styles.backgroundImage}
                    imageStyleSwiper={styles.imageStyleSwiper}
                    swiperView={styles.swiperView}
                />
                <AccordionView
                    productItems={accordionData}
                    changeState={changeStateFunction}
                    selectedIndex={selectedIndex}
                    goforProductPage={goforProductPage}
                />
                <Spinner
                   visible={spinner}
                   textContent={'Loading Data'}
                   textStyle={{color:'red'}}
               />
            </Content>
        </Container>
    )
}
export default HomeView;
