/**
 * 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, { Component } from 'react';
import {
  Container,
  Content,
  View,
  CardItem,
  Left,
  Card,
  Button,
  Icon,
  Body,
  Right,
} from 'native-base';
import {
  Text,
  ScrollView,
  ImageBackground,
  TouchableWithoutFeedback,
} from 'react-native';
import styles from './styles';

interface NeetflixCardProp {
  netflixCards: Array<any>;
  goForBreaking: () => void;
}
class NetflixCards extends React.Component<NeetflixCardProp> {
  constructor(props: NeetflixCardProp) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.container}>
        {this.props.netflixCards.map((cards, index: number) => {
          return (
            <View key={index}>
              {cards.imagefull && (
                <ImageBackground
                  source={cards.imagefull}
                  style={styles.fullwidth}
                  resizeMode="cover"
                />
              )}
              {cards.button1 && (
                <View style={styles.buttonsView}>
                  <Button iconLeft light style={styles.button}>
                    <Icon style={styles.noMargin} name={cards.button1Icon} />
                    <Text style={styles.paddingLeftText}>{cards.button1}</Text>
                  </Button>
                  <Button iconLeft light bordered style={styles.button}>
                    <Icon style={styles.marginZero} name={cards.button2Icon} />
                    <Text style={styles.buttonText}>{cards.button2}</Text>
                  </Button>
                </View>
              )}

              <CardItem header style={styles.headercontent}>
                <Left>
                  <Text style={styles.headerText}>{cards.headText}</Text>
                </Left>
              </CardItem>
              <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
              >
                {cards.images.map(
                  (photos: any, cardIndex: string | number | undefined) => {
                    return (
                      <TouchableWithoutFeedback
                        onPress={this.props.goForBreaking}
                        key={cardIndex}
                      >
                        <Card
                          style={
                            cardIndex === 0 ? styles.card : styles.otherCards
                          }
                          key={cardIndex}
                        >
                          <ImageBackground
                            source={photos.image}
                            style={styles.imageBackgroundView}
                            resizeMode="cover"
                            imageStyle={{ borderRadius: 2 }}
                          />
                        </Card>
                      </TouchableWithoutFeedback>
                    );
                  }
                )}
              </ScrollView>
            </View>
          );
        })}
      </View>
    );
  }
}

export default NetflixCards;
