/**
 * 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 {
  Content,
  Card,
  CardItem,
  Text,
  Body,
  Left,
  Right,
  Button,
  Icon,
  View,
} from 'native-base';
const ScrollingCardscomponent = (props: any) => {
  const {
    productsJson,
    headingLeftItem,
    offerButtons,
    contentContainer,
    cardStyle,
    cardItem,
    imageItem,
    imageStyle,
    rateItem,
    nameItem,
    nameItemText,
    cardqtyItem,
    nameTextAdd,
    viewRowCenter,
    type,
    star,
    heartEmpty,
    iconStyle1,
    iconStyle,
    heartFull,
    share,
    cardItem1,
    selectedIndex,
    crossedText,
    ratingStyle,
    headingLeft,
    headingRight,
  } = props;
  return (
    <Content padder>
      <View>
        <CardItem header>
          <Left>
            <Text style={headingLeftItem}>{headingLeft}</Text>
          </Left>
          <Right>
            <Button
              danger
              bordered
              style={offerButtons}
              onPress={() => props.goForViewMore(productsJson)}
            >
              <Text>{headingRight}</Text>
            </Button>
          </Right>
        </CardItem>
        <Body>
          <ScrollView
            horizontal
            style={contentContainer}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
          >
            {productsJson.map((productItems: any, index: number) => {
              return (
                <Card style={cardStyle} key={index}>
                  <CardItem style={cardItem1}>
                    <Right>
                      <View style={viewRowCenter}>
                        {selectedIndex === index ? (
                          <Button
                            transparent
                            onPress={() => props.favouriates('checked', index)}
                          >
                            <Icon
                              type={type}
                              name={heartFull}
                              style={iconStyle1}
                            />
                          </Button>
                        ) : (
                          <Button
                            transparent
                            onPress={() =>
                              props.favouriates('unchecked', index)
                            }
                          >
                            <Icon
                              type={type}
                              name={heartEmpty}
                              style={iconStyle1}
                            />
                          </Button>
                        )}
                        <Icon type={type} name={share} style={iconStyle} />
                      </View>
                    </Right>
                  </CardItem>
                  <CardItem
                    button
                    style={imageItem}
                    onPress={() => props.goforProductDetailPage(productItems)}
                  >
                    <Image
                      source={ productItems.image }
                      style={imageStyle}
                    />
                  </CardItem>
                  <CardItem style={cardItem}>
                    <Left>
                      <Button
                        success
                        style={offerButtons}
                        onPress={() =>
                          props.goforProductDetailPage(productItems)
                        }
                      >
                        <Text>
                          {productItems.star}{' '}
                          <Icon name={star} type={type} style={ratingStyle} />
                        </Text>
                      </Button>
                    </Left>
                    <Right>
                      <CardItem style={rateItem}>
                        <Text>{productItems.salePrice}</Text>
                        <Text style={crossedText}>
                          {productItems.regularPrice}
                        </Text>
                      </CardItem>
                    </Right>
                  </CardItem>
                  <CardItem style={nameItem}>
                    <Text style={nameItemText}>{productItems.name}</Text>
                  </CardItem>
                  <CardItem style={cardqtyItem}>
                    <Text style={nameTextAdd}>{productItems.qty}</Text>
                  </CardItem>
                </Card>
              );
            })}
          </ScrollView>
        </Body>
      </View>
    </Content>
  );
};
export default ScrollingCardscomponent;
