/**
 * 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 { ImageBackground, Platform } from 'react-native'
import {
    Text,
    View,
    Container,
    Content,
    Item,
    Left,
    Right,
    Button,
    Icon,
    Grid,
    Row,
    Col,
    Form,
    Label,
    Input,
    ListItem,
    Thumbnail,
    Footer,
} from 'native-base'; import Headercontent from '../../../components/grocery/header';

import styles from './productDetailsStyle'
import PickerComponent from '../../../components/grocery/picker';
import quantityList from '../../../Database/grocery/data'
import RatingComponent from '../../../components/grocery/ratingComponent';
import ScrollingCardscomponent from '../../../components/grocery/scrollCards';

interface ProductDetailsViewProps {
    textTitle: string;
    details: any; 
    type: any; 
    heartEmpty: string;
    iconClicked: boolean;
    heartFull: string;
    share: string;
    selected: any; 
    selectedIndex: number;
    goToMyCart: () => void;
    goBack: () => void;
    favouriates: (type:string, index?:number) => void;
    onValueChange: (value: any) => void;
    goforProductDetailPage: (item:any) => void;
    goForViewMore: (item:any, index:number) => void;
}
 
const ProductDetailsView = (props:ProductDetailsViewProps) => {
    const {
         textTitle,
          details, 
          type, 
          heartEmpty,
           iconClicked,
            heartFull, 
            share,
             selected, 
             selectedIndex 
            } = props
    const cash = 'Cash on Delivery';
    const shipping = 'Free Shipping';
    const delivery = 'Delivery in 3-6 Days';
    const review = 'Ratings & Reviews';
    const herbsImage = require('../../../assets/grocery/herbs.jpg');

    const freshtext = 'Fresh and Good Product';
    const star = 'star';

    return (
        <Container>
            <Headercontent
                name={'arrow-left'}
                onPress={() => props.goBack()}
                loginTitle={textTitle}
                type={'FontAwesome'}
                rightIcon={'shopping-cart'}
                rightType={'FontAwesome'}
                stylesRight={styles.rightIcon}
                onPressToCart={() => props.goToMyCart()}
            />
            <Content>
                <View>
                    <ImageBackground
                        style={styles.backgroundImage}
                        source={details.image}
                        imageStyle={styles.imageStyleSwiper}
                        resizeMode={'contain'}
                    />
                    <View>
                        <Item>
                            <Left>
                                <Button transparent>
                                    <Text style={styles.subText}>{details.name}</Text>
                                </Button>
                            </Left>
                            <Right>
                                <View style={styles.viewRowCenter}>
                                    {iconClicked ? <Button
                                        transparent
                                        onPress={() => props.favouriates('checked')}
                                    >
                                        <Icon
                                            type={type}
                                            name={heartEmpty}
                                            style={styles.iconStyle}
                                        />
                                    </Button>
                                        : <Button
                                            transparent
                                            onPress={() => props.favouriates('unchecked')}
                                        >
                                            <Icon
                                                type={type}
                                                name={heartFull}
                                                style={styles.IconSelected}
                                            />
                                        </Button>
                                    }
                                    <Icon type={type} name={share} style={[styles.iconStyle, styles.shareIcon]} />
                                </View>
                            </Right>
                        </Item>
                    </View>

                    <View>
                        <Item style={styles.itemPadding}>
                            <Left>
                                <View style={styles.alignRowItem}>
                                    <Text style={styles.priceText}>Price</Text>
                                    <Text style={styles.priceTextDanger}> $ {details.price}</Text>
                                </View>
                            </Left>
                            {Platform.OS === 'ios' &&
                                <Right>
                                    <View style={styles.alignRowItem}>
                                        <Text style={styles.subText}>Quantity</Text>
                                        <View style={{ width: 80 }}>
                                            <PickerComponent
                                                onValueChange={($value) => props.onValueChange($value)}
                                                selected={selected}
                                                jsonList={quantityList.quantity}
                                            />
                                        </View>
                                    </View>
                                </Right>
                            }
                            {Platform.OS === 'android' &&
                                <Right>

                                    <View style={styles.alignRowItem}>
                                        <Text style={styles.subText}>Quantity</Text>
                                        <PickerComponent
                                            onValueChange={($value) => props.onValueChange($value)}
                                            selected={selected}
                                            jsonList={quantityList.quantity}
                                        />
                                    </View>
                                </Right>
                            }

                        </Item>
                    </View>
                </View>
                <Grid>
                    <Row>
                        <Col style={styles.columnItems1}>
                            <Form>
                                <Item fixedLabel style={styles.columndirection}>
                                    <Label> Check Delivery </Label>
                                    <Input placeholder="Enter your pin.." />
                                </Item>
                            </Form>
                        </Col>
                        <Col style={styles.columnItems2}>
                            <Item>
                                <Button style={styles.columnButton}><Text>Submit</Text></Button>
                            </Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <View style={styles.inOneLine}>
                                <Text style={styles.textStylesCash}>{cash}</Text>
                                <Text style={styles.textStylesCash}>{shipping}</Text>
                                <Text style={styles.textStylesCash}> {delivery}</Text>
                            </View>
                        </Col>
                    </Row>
                    <ListItem itemHeader first>
                        <Text> {review} </Text>
                    </ListItem>
                    <Row>
                        <Col style={styles.ratingAndCategory}>
                            <Text style={styles.ratingText}>5 <Icon name={star} type={type} style={styles.ratingIcon} /></Text>
                            <Text>1 Review</Text>
                        </Col>
                        <Col style={styles.ratingAndCategory1}>
                            <RatingComponent
                                ratingText={styles.ratingText}
                                ratingIcon={styles.ratingIcon}
                                coloredDivParent={styles.coloredDivParent}
                                ratingJson={quantityList.ratings}
                            />
                        </Col>
                    </Row>
                </Grid>
                <View padder>
                    <Item >
                        <Left>
                            <View style={styles.ratingViewcontainer}>
                                <Button success style={styles.ratingButtonStyle}>
                                    <Text>5 <Icon name={star} type={type} style={styles.ratingStyle} /></Text>
                                </Button>
                                <Text>Fresh Food</Text>
                            </View>
                            <Text style={styles.freshAndGood}>{freshtext}</Text>
                        </Left>

                        <Right>
                            <Thumbnail square source={herbsImage} style={styles.thumbSize} />
                        </Right>
                    </Item>
                </View>
                <ScrollingCardscomponent
                    productsJson={quantityList.topSaversproduct}
                    headingLeftItem={styles.headingLeftItem}
                    offerButtons={styles.offerButtons}
                    cardStyle={styles.cardStyle}
                    cardItem={styles.cardItem}
                    imageItem={styles.imageItem}
                    imageStyle={styles.imageStyle}
                    rateItem={styles.rateItem}
                    nameItem={styles.nameItem}
                    nameItemText={styles.nameItemText}
                    cardqtyItem={styles.cardqtyItem}
                    footerButton={styles.footerButton}
                    goforProductDetailPage={(item:any) => props.goforProductDetailPage(item)}
                    favouriates={(data:any, i:number) => props.favouriates(data, i)}
                    viewRowCenter={styles.viewRowCenter}
                    type={type}
                    star={star}
                    heartEmpty={heartEmpty}
                    iconStyle1={styles.iconStyle1}
                    heartFull={heartFull}
                    share={share}
                    cardItem1={styles.cardItem1}
                    selectedIndex={selectedIndex}
                    crossedText={styles.crossedText}
                    ratingStyle={styles.ratingStyle}
                    goForViewMore={(data:any, index:number) => props.goForViewMore(data, index)}
                />
            </Content>
            <Footer style={styles.footerContent}>
                <Grid>
                    <Row>
                        <Col style={styles.footerStyle}>
                            <Item>
                                <Button style={styles.buttonCart}>
                                    <Text style={styles.buttonCartText}>Add to Cart</Text>
                                </Button>
                            </Item>
                        </Col>
                        <Col style={styles.footerStyle}>
                            <Item>
                                <Button style={styles.buttonBuynow} onPress={() => props.goToMyCart()}>
                                    <Text>Buy Now</Text>
                                </Button>
                            </Item>

                        </Col>
                    </Row>
                </Grid>
            </Footer>
        </Container>

    )
}
export default ProductDetailsView;
