detailPage

import React, {Component} from 'react';
import {Platform, StyleSheet, View, 
        FlatList, ScrollView, Image, ActivityIndicator,
        TouchableOpacity, Alert, Button } from 'react-native';

import { Container, Item, Input, Icon, Text, Card,
  Thumbnail, CardItem, Body, Left, Right, Textarea, Form, Header, Content, Footer } from 'native-base';

import StarRating from 'react-native-star-rating';

import Carousel from 'react-native-carousel-view';

import Modal from "react-native-modal";

import SplashScreen from 'react-native-splash-screen';


'use strict';

import {Dimensions} from 'react-native';
import { directive } from '@babel/types';
const { width, height } = Dimensions.get('window');

export default class ProductDetail extends React.Component {

  constructor(props){
    super(props);
    this.state ={
      isLoading: true,
      isModalVisible: false, 
      showReview: false,
      count: '' 
    }
  }

 

  toggleModal = () => {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  };


  componentDidMount(){
    SplashScreen.hide();
    fetch('http://192.168.10.28:3000/product/5ce789d79e595a210de6b3d2')
      .then((response) => response.json())
      .then((responseJson) => {    
        this.setState(state => (
          { 
            isLoading: false,
            itemDetail: responseJson
          }
        ))
            
      })

      .catch((error) =>{
        console.log(error);
      });
          
    }

  render() {
    let image1, image2, image3, shopImg, shopCover;

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    } else {
      image1 = this.state.itemDetail.message.productImages[0].image1.toString();
      image1 = image1.slice(7);
      image2 = this.state.itemDetail.message.productImages[0].image2.toString();
      image2 = image2.slice(7);
      image3 = this.state.itemDetail.message.productImages[0].image3.toString();
      image3 = image3.slice(7);
      shopImg = this.state.itemDetail.message.shop_id.images.shop_logo.toString();
      shopImg = shopImg.slice(7);
      // shopCover = this.state.itemDetail.shop_details[0][0].images.shop_picture.toString();
    }

  
    return(
      
      <Container>
      
      <Content>
      <ScrollView>
         <Card>
           <CardItem>
           <View style={styles.container} >
               <Carousel
               width={width}
               height={400}
               delay={4000}
               indicatorAtBottom={true}
               indicatorSize={20}
               indicatorColor="black"
               loop = {false}
               animate= {false}
               >
                 <View style={styles.carouselContent}>
                  <Image source={{uri: `http://192.168.10.28:3000/${image1}`}} style={{height: 400, width: 350, flex: 1}}/>   
                 </View>
                 <View style={styles.carouselContent}>
                  <Image source={{uri: `http://192.168.10.28:3000/${image2}`}} style={{height: 400, width: 350, flex: 1}}/>   
                 </View>
                 <View style={styles.carouselContent}>
                  <Image source={{uri: `http://192.168.10.28:3000/${image3}`}} style={{height: 400, width: 350, flex: 1}}/>   
                 </View>
               </Carousel>
             </View>
           </CardItem>

           <CardItem>
             <View style={{flex:1, flexDirection:'row'}}> 
              
              <View style={{flex:0.6, paddingLeft:10, paddingTop:5}}>
                <Text>{this.state.itemDetail.message.name.toString()}</Text>
                <Text style={{color:'gray', fontSize:10}}>{this.state.itemDetail.message.specs.description.toString()}</Text>
                <View style={{width: 80, paddingTop:4}}>
                  <ReadCustomStarExample rating={parseInt(this.state.itemDetail.message.rating[0].values)} />
                </View>
              </View>
            
              <View style={{flex:0.4, paddingRight:15}}>
                <Text style={{fontSize:30, fontWeight:'bold', color:'red'}}> Rs {this.state.itemDetail.message.specs.price.toString()} </Text> 
                <Text style={{color:'gray'}}> ({this.state.itemDetail.message.specs.discount}% discount) </Text>   
              </View>
  
            </View>
           </CardItem>
         </Card>

        <Card style={{marginTop:0}}>
          <View>
            <Button title="Choose Your Specifications" onPress={this.toggleModal} />
            <Modal style={{margin:0, justifyContent: 'flex-end'}}
              onBackdropPress={() => this.setState({ isModalVisible: false })}
              onBackButtonPress={() => this.setState({ isModalVisible: false })}
              isVisible={this.state.isModalVisible}>
            
              <Card style={{height: 400, backgroundColor: 'white'}}>
                <CardItem>
                  <Text>Size </Text>
                  
                </CardItem>
                <CardItem>
                  <View style={{flex:1, flexDirection:'row', justifyContent: 'space-around'}}>
                      
                     <FlatList
                        data={this.state.itemDetail.message.specs.size}
                        horizontal={true}
                        keyExtractor={({id}, index) => id}
                        renderItem={({item}) => 

                        <TouchableOpacity key={item.size_value}
                          style={{alignItems: 'center', backgroundColor: '#DDDDDD', padding: 10, marginRight:20}}
                          onPress={() => {
                            this.onPress(item.color_details)
                            
                          }}
                          >
                            <Text> {item.size_value.toString()} </Text>
                        </TouchableOpacity>
                      }
                       
                      />
                    
                  </View>
                </CardItem>
                
                <CardItem>
                  <View style={{flex:1, flexDirection:'row'}}>
                    <View style={{flex:0.6}}>
                      <Text style={{fontWeight:'bold'}}>Color</Text>
                    </View>
                    <View style={{flex:0.4}}>
                      <Text style={{fontWeight:'bold'}}>Quantity</Text>
                    </View>                          
                    </View>
                </CardItem>
                
                <CardItem>

                      <FlatList
                        data={this.state.detail}                        
                        keyExtractor={({id}, index) => id}
                        renderItem={({item}) =>
                          <View style={{flex:1, flexDirection:'row'}}>
                            <View style={{flex:0.6}}>
                              <Text>{item.color_value.toString()}</Text>
                            </View>
                            <View style={{flex:0.4}}>
                              <Text>{item.quantity.toString()}</Text>
                            </View>                          
                          </View>
                        }
                            
                      />
                </CardItem>
               
              </Card>
              
            </Modal>
          </View>
        </Card>

        <Card>
            <CardItem style={{flex:1, flexDirection:'row'}}>
              <Left style={{flex:0.2}}>
                <Image source={{uri: `http://192.168.10.26:4000/${shopImg}`}} style={{height: 50, width: 50}}/>
              </Left>
              <Body style={{flex:0.5}}>
                <Text> {this.state.itemDetail.message.shop_id.shopname}{"\n"}
                  <Text style={{color:"#86888c", fontSize:12}}> {this.state.itemDetail.message.shop_id.location[0]} {this.state.itemDetail.message.shop_id.location[1]} {"\n"} </Text> 
                  <Text style={{color:"#64666b", fontSize:14, fontStyle:'italic'}}> {this.state.itemDetail.message.shop_id.followers.length} followers </Text>  
                </Text>
              </Body>
              <Right style={{flex:0.3}}>
                <Button title="Follow" />
              </Right>
              
            </CardItem>     
        </Card>

        <Card>
          <View style={{margin:20}}>
            <Text style={{paddingBottom:10}}>Highlights</Text>
            <Text> <Text style={{fontStyle:'italic', color:"#949699", fontSize:14}}> Brand : </Text>{this.state.itemDetail.message.brand.toString()} </Text>
            <Text> <Text style={{fontStyle:'italic', color:"#949699", fontSize:14}}> Category : </Text>{this.state.itemDetail.message.categories[0].childCategory.toString()}</Text>
            <Text> <Text style={{fontStyle:'italic', color:"#949699", fontSize:14}}> Tag : </Text>{this.state.itemDetail.message.specs.tags.toString()} </Text>
            <Text style={{fontStyle:'italic', color:"#949699", fontSize:14, padding:10}}>Description</Text>
            <Text style={{ paddingLeft:15, paddingRight:15}}> {this.state.itemDetail.message.product_details.toString()} </Text>
          </View>
        </Card>

        <Card>
          <Text style={{paddingTop:15, paddingLeft:15}}> Rate this item </Text>
          <CardItem style={{paddingLeft:50}}>
            <CustomStarExample />
          </CardItem>
        </Card>

        <Card>
          <Text style={{paddingTop:15, paddingLeft:15}}> Add a review </Text>
          
          <Form style={{padding:10}}> 
            <Textarea rowSpan={3} bordered placeholder="Write a review" />
            <Button title="Post" /> 
          </Form> 

          <CardItem>
          <Button title="View all reviews"
             onPress={() => {
              this.onPressReview()
            }}
          />
          </CardItem>
          {
            this.state.showReview ?
            <CardItem>   
              <FlatList
                data={this.state.itemDetail.message.review}                        
                keyExtractor={({id}, index) => id}
                renderItem={({item}) =>
                  <View style={{flex:1, borderWidth:0.5, padding:5}}>
                    <View style={{margin:10, borderWidth:0.5, padding:8, borderColor:'gray'}}>
                      <Text style={{color:'gray', paddingBottom:5}}>UserID: {item.user_id.toString()}</Text>
                      <Text>{item.comment_details.comment.toString()}</Text>
                    </View>                      
                  </View>
                }
                                
              />
            </CardItem>:null
 
          }
          

        </Card>

       </ScrollView>
       </Content>

      <Footer >
        <View style={{flex:1}}> 
        <Button title="Add to Cart"/>
        </View>
      </Footer>

      </Container>

    );
  }

  onPress = (d) => {
    this.setState( 
      { 
        detail: d 
      }
    )
  }

  onPressReview = () => {
    this.setState( 
      { 
        showReview: true,
      }
    ) 
  }


  }


  class Size extends React.Component {
    
    render() {
    
       return(
        <TouchableOpacity
        style={{alignItems: 'center',backgroundColor: '#DDDDDD', padding: 10}}
        onPress={this.onPress}
        >
          <Text> {this.props.size} </Text>
        </TouchableOpacity>
       );
    }
  }

  class Color extends React.Component {
    
    render(){
      return(
        <Text>{this.props.color}    {this.props.quantity}      </Text>  
       
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    carouselContent: {
      flex:1, 
      justifyContent: 'center', 
      alignItems: 'center'
    }
  
  });
  

  class CustomStarExample extends Component {
 
    constructor(props) {
      super(props);
      this.state = {
        starCount: 0
      };
    }
   
    onStarRatingPress(rating) {
      this.setState({
        starCount: rating
      });
    }
   
    render() {
      return (
        <StarRating
          disabled={false}
          starSize={35}
          emptyStar={'ios-star-outline'}
          fullStar={'ios-star'}
          halfStar={'ios-star-half'}
          iconSet={'Ionicons'}
          maxStars={5}
          rating= {this.state.starCount} 
          selectedStar={(rating) => this.onStarRatingPress(rating)}
          fullStarColor={'orange'}
          starStyle={{paddingRight:10}}
        />
      );
    }
  }


  class ReadCustomStarExample extends Component {
 
    constructor(props) {
      super(props);
      this.state = {
        starCount: '1'
      };
    }
   
    onStarRatingPress(rating) {
      this.setState({
        starCount: rating
      });
    }
   
    render() {
      return (
        <StarRating
          disabled={true}
          starSize={15}
          emptyStar={'ios-star-outline'}
          fullStar={'ios-star'}
          halfStar={'ios-star-half'}
          iconSet={'Ionicons'}
          maxStars={5}
          rating= {this.props.rating}
          selectedStar={(rating) => this.onStarRatingPress(rating)}
          fullStarColor={'orange'}
        />
      );
    }
  }


//   3 images
//   this.state.itemDetail.message[0].imageURL[0].image1.toString()
//   this.state.itemDetail.message[0].imageURL[0].image1.toString()
//   this.state.itemDetail.message[0].imageURL[0].image1.toString()

//   short_description
//   this.state.itemDetail.message[0].short_description.toString()

//   rating
//   parseInt(this.state.itemDetail.message[0].rating)

//   price
//   this.state.itemDetail.message[0].price_discount[0].price.toString()

//   FlatList1
//   this.state.itemDetail.message[0].size
//   item.size_value.toString()

//   FlatList2
//   this.state.detail
//   item.quantity.toString()

//   ShopProfile pic
//   this.state.itemDetail.message[0].shop_profile.profile_pic.toString()

//   Shop name
//   this.state.itemDetail.message[0].shop_profile.name.toString()

//   Shop location
//   this.state.itemDetail.message[0].shop_profile.location.toString()

//   Follower_count
//   this.state.itemDetail.message[0].shop_profile.follower_count.toString()

// this.state.itemDetail.message[0].highlights[0].brand.toString()
// this.state.itemDetail.message[0].highlights[0].category.toString()
// this.state.itemDetail.message[0].highlights[0].tag.toString() =
// this.state.itemDetail.message[0].highlights[0].detail.toString()

// Flatlist3
// this.state.itemDetail.message[0].review
// item.user_id.toString()
// item.comment.toString()