import React, {Component} from 'react';
import { StyleSheet, Text, Image, View, Alert, TouchableOpacity } from 'react-native';
import { Container, Header, Content, Left, Body, Right, Title, Button as Btn, Icon, Card, CardItem, Col, Footer, Row } from 'native-base';
import { api_url, img_url, reject_order,font_title,font_description } from '../config/Constants';
import * as colors from '../assets/css/Colors';
import {captureScreen} from 'react-native-view-shot';

import { Loader } from '../components/GeneralComponents';
import { Divider, Button } from 'react-native-elements';
import axios from 'axios';
import ViewShot from "react-native-view-shot";
import { connect } from 'react-redux'; 
import { serviceActionPending, serviceActionError, serviceActionSuccess } from '../actions/ViewPrescriptionActions';
import ImageView from 'react-native-image-view';
import back from "../assets/icons/back1.png";
import download from "../assets/icons/download.png";
import rx from "../assets/icons/rx.jpg";
class ViewPrescription extends Component<Props> {

  constructor(props) {
    super(props)
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    this.reject_order = this.reject_order.bind(this);
    this.state = {
      data:this.props.route.params.data,
      image:[],
      isImageViewVisible:false,
      imageURI:'',
      dataExist:false
    }
  }

  componentDidMount(){
    // this.refs.viewShot.capture().then(uri => {
    //   console.log("do something with ", uri);
    // });
  }
  handleBackButtonClick= () => {
    this.props.navigation.goBack(null);
  }

  accept_order = () => {
    this.props.navigation.navigate('Payment',{ from : 'prescription', prescription_id:this.state.data.id, prescription_total:this.state.data.total });  
  }
  
   takeScreenShot = () => {
    // To capture Screenshot
    captureScreen({
      // Either png or jpg (or webm Android Only), Defaults: png
      format: 'jpg',
      // Quality 0.0 - 1.0 (only available for jpg)
      quality: 0.8, 
    }).then(
      //callback function to get the result URL of the screnshot
      (uri) => {
        this.setState({imageUri:uri});
        console.log(uri)
        alert(uri);
        // setSavedImagePath(uri);
        // setImageURI(uri);
      },
      (error) => console.error('Oops, Something Went Wrong', error),
    );
  };

  reject_order = async () => {
    this.props.serviceActionPending();
    await axios({
      method: 'post', 
      url: api_url + reject_order,
      data:{ prescription_id : this.state.data.id }
    })
    .then(async response => {
        await this.props.serviceActionSuccess(response.data)
        if(response.data.status == 1){
          Alert.alert(
            "Rejected",
            "This prescription successfully rejected.",
            [
              { text: "OK", onPress: () => this.props.navigation.goBack(null) }
            ],
            { cancelable: false }
          );

        }else{
          alert(response.data.message);
        }
    })
    .catch(error => {
        this.props.serviceActionError(error);
    });
  }
  onCapture = uri => {
    console.log("do something with ", uri);
  }

  view_image = (data) =>{
    let image = [
          {
              source: {
                  uri: img_url + data,
              },
              title: 'Prescription Image',
              width: 806,
              height: 720
          }
      ]

    this.setState({ image : image, isImageViewVisible : true });
  }

  close_popup = () =>{
    this.setState({ isImageViewVisible : false });
  }
  
  render() {

    const { isLoding, error, data, message, status } = this.props

    return (
    
      <Container>
      {/* <ViewShot onCapture={this.onCapture} captureMode="mount"> */}
        <View>
          <View style={styles.view_style1}>
            <TouchableOpacity style={styles.view_style2} onPress={this.handleBackButtonClick} activeOpacity={1} >
            <Image
                style={{
                  width: 20,
                  height: 20,
                  backgroundColor: "white",
                  marginVertical: 6,
                  marginLeft: 2,
                }}
                source={back}
              />
            </TouchableOpacity>
            <TouchableOpacity style={{}} onPress={this.takeScreenShot} activeOpacity={1} >
            <Image
                style={{
                  width: 40,
                  height: 40,
                  backgroundColor: "white",
                  marginTop: 6,
                  marginLeft:11
                 
                }}
                source={download}
              />
            </TouchableOpacity>
            {/* <View style={styles.view_style4} /> */}
         
          </View>
          </View>
         
          <View
          style={{marginLeft:12}}
          >
          <Text style={styles.view_style5}>View Prescription</Text>
          </View>
          
      
        <View style={styles.view_style6}/>
        <Content>
          <ImageView
              images={this.state.image}
              imageIndex={0}
              isVisible={this.state.isImageViewVisible}
              onClose={() => this.close_popup() }
          />
          <Card>
            
          <Text style={styles.view_style7}>Dr</Text>
            <CardItem>
            <Image
                style={{
                  width: 60,
                  height: 60,
                  backgroundColor: "white",
                  marginVertical: 6,
                  marginLeft: 2,
                }}
                source={rx}
              />
              <Text style={styles.view_style11}>{this.state.data.doctor.name}</Text>
              <Text>{"\n"}</Text>
              {/* <Text style={styles.view_style7}>{this.state.data.doctor.qualification}</Text> */}
            </CardItem>
            <View
            style={{
              left:'20%',
              marginTop:-30
            }}
            >
            <Text style={styles.view_style7}>{this.state.data.doctor.qualification}</Text>
              <Text style={styles.view_style7}>{this.state.data.doctor.description}</Text>
              <Text style={styles.view_style7}>{this.state.data.doctor.email}</Text>
            </View>
            <CardItem>
            {/* {this.state.data.images.map((row, index) => (
              <Col onPress={ ()=> this.view_image(row) }>
                <Image 
                  style={styles.view_style8}
                  resizeMode='cover'
                  source={{ uri : img_url + row}}
                />
              </Col>
            ))} */}
            </CardItem>
          </Card>
          {this.state.data.customer_notes &&
          <Card>
            
            <CardItem header>
              <Text style={styles.view_style9}>Your Notes</Text>
            </CardItem>
            <CardItem>
              <Text style={styles.view_style10}>{this.state.data.customer_notes}</Text>
            </CardItem>
          </Card>
          }
          
          <Card>
            
          <Text style={styles.view_style7}>Patient Detail</Text>
            <CardItem >
              <Text style={styles.view_style11}>{global.name}</Text>
            </CardItem>
            <View style={styles.view_style12}>
              <Text style={styles.view_style7}>Problem title </Text>
              <Text style={styles.view_style9}>{this.state.data.booking.title},</Text>
              <Text style={styles.view_style7}>Problem description</Text>
              <Text style={styles.view_style9}>{this.state.data.booking.description}</Text>
            </View>
          </Card>
          {/* <ViewShot onCapture={this.onCapture} captureMode="mount">
          <Text>...The Scroll View Content Goes Here...</Text>
        </ViewShot> */}
          {this.state.data.status != 1 &&
          <Card>
            <CardItem header>
              <Text style={styles.view_style7}>Prescription Medicine</Text>
            </CardItem>
            {this.state.data.medicines.map((row, index) => (
            <CardItem>
              <Row>
                <Col style={styles.view_style16} >
                  <Text style={styles.view_style17} >{row.name}</Text>
                </Col>
                
                <Col style={styles.view_style18}>
             
                </Col>
                <Col style={styles.view_style20} >
                <Text style={styles.view_style19}>Take for {row.days} days</Text>
                  {/* <Text style={styles.view_style21}>{global.currency}{row.price}</Text> */}
                </Col>
              </Row>
              
            </CardItem>
            ))}
            <Divider style={styles.view_style22} />
            {/* <Row style={styles.view_style23} >
              <Col>
                <Text style={styles.view_style24}>Subtotal</Text>
              </Col>
              <Col style={styles.view_style25} >
                <Text style={styles.view_style26}>{global.currency}{this.state.data.sub_total}</Text>
              </Col>
            </Row>
            <Row style={styles.view_style27} >
              <Col>
                <Text style={styles.view_style28}>Delivery Charge</Text>
              </Col>
              <Col style={styles.view_style29} >
                <Text style={styles.view_style30}>{global.currency}{this.state.data.delivery_charge}</Text>
              </Col>
            </Row>
            <Row style={styles.view_style31} >
              <Col>
                <Text style={styles.view_style32}>Tax</Text>
              </Col> */}
              {/* <Col style={styles.view_style33} >
                <Text style={styles.view_style34}>{global.currency}{this.state.data.tax}</Text>
              </Col>
            </Row> */}
            <View style={styles.view_style35} />
            {/* <Divider style={styles.view_style36} /> */}
            <Row style={styles.view_style37} >
              {/* <Col>
                <Text style={styles.view_style38}>Total</Text>
              </Col> */}
              {/* <Col style={styles.view_style39} >
                <Text style={styles.view_style40} >{global.currency}{this.state.data.total}</Text>
              </Col> */}
            </Row>
            {/* <View style={styles.view_style41} /> */}
          </Card>
        }
        </Content>
        {this.state.data.status == 9 &&
        <Footer style={styles.view_style42} >
          <Row style={styles.view_style43}>
            <Col>
              <Button
                title="Reject"
                onPress={this.reject_order}
                buttonStyle={styles.view_style44}
              />
            </Col>
            <Col style={styles.view_style45} />
            <Col>
              <Button
                title="Accept"
                onPress={this.accept_order}
                buttonStyle={styles.view_style46}
              />
            </Col>
          </Row>
        </Footer>
        }
        <Loader visible={isLoding} />
        {/* </ViewShot> */}
      </Container>
    
    );
  }
}

function mapStateToProps(state){
  return{
    isLoding : state.view_prescription.isLoding,
    error : state.view_prescription.error,
    data : state.view_prescription.data,
    message : state.view_prescription.message,
    status : state.view_prescription.status,
  };
}

const mapDispatchToProps = (dispatch) => ({
    serviceActionPending: () => dispatch(serviceActionPending()),
    serviceActionError: (error) => dispatch(serviceActionError(error)),
    serviceActionSuccess: (data) => dispatch(serviceActionSuccess(data))
});


export default connect(mapStateToProps,mapDispatchToProps)(ViewPrescription);

const styles = StyleSheet.create({
  view_style1:{ margin:10,flexDirection:'row',justifyContent:'space-between'},
  view_style2:{width:100, justifyContent:'center'},
  view_style3:{color:colors.theme_fg_two, fontSize:30},
  view_style4:{ margin:5 },
  view_style5:{ fontSize:25, color:colors.theme_fg_two,  fontFamily: font_title,marginLeft:12},
  view_style6:{margin:5},
  view_style7:{ fontFamily:font_title, color:'grey' },
  view_style8:{
    width: 100,
    height: 70,
    alignSelf:'center',
    borderColor: colors.theme_bg_three,
    borderWidth: 1
  },
  view_style9:{ fontFamily:font_title, color:colors.theme_fg_two },
  view_style10:{fontFamily:font_description},
  view_style11:{ fontFamily:font_title, color:colors.theme_fg_two,fontSize:20, },
  view_style12:{ paddingLeft:20, paddingRight:20, paddingBottom:10 },
  view_style13:{fontFamily:font_description},
  view_style14:{fontFamily:font_description},
  view_style15:{ fontFamily:font_title, color:colors.theme_fg_two },
  view_style16:{ width:40 },
  view_style17:{fontFamily:font_title,width:100},
  view_style18:{ width:'70%' },
  view_style19:{fontFamily:font_description,width:'100%',paddingHorizontal:12},
  view_style20:{ width:80 },
  view_style21:{fontFamily:font_description},
  view_style22:{
    backgroundColor: colors.theme_fg_two, 
    width:'90%', 
    alignSelf:'center'
  },
  view_style23:{
    marginLeft:20, 
    marginRight:20, 
    marginTop:10
  },
  view_style24:{fontFamily:font_title},
  view_style25:{ width:80 },
  view_style26:{fontFamily:font_description},
  view_style27:{
    backgroundColor: colors.theme_fg_two, 
    width:'90%', 
    alignSelf:'center'
  },
  view_style28:{fontFamily:font_title},
  view_style29:{ width:80 },
  view_style30:{fontFamily:font_description},
  view_style31:{
    backgroundColor: colors.theme_fg_two, 
    width:'90%', 
    alignSelf:'center'
  },
  view_style32:{fontFamily:font_title},
  view_style33:{ width:80 },
  view_style34:{fontFamily:font_description},
  view_style35:{ marginBottom:20 },
  view_style36:{
    marginLeft:20, 
    marginRight:20, 
    marginTop:10
  },
  view_style37:{
    backgroundColor: colors.theme_fg_two, 
    width:'90%', 
    alignSelf:'center'
  },
  view_style38:{fontFamily:font_title},
  view_style39:{ width:80 },
  view_style40:{fontFamily:font_title },
  view_style41:{ marginBottom:20 },
  view_style42:{backgroundColor:'transparent'},
  view_style43:{ padding:10 },
  view_style44:{ backgroundColor:colors.red ,fontFamily:font_title},
  view_style45:{ width:10 },
  view_style46:{ backgroundColor:colors.theme_fg,fontFamily:font_title },
  
  header: {
    justifyContent: "flex-start",
    height: "10%",
    backgroundColor: colors.theme_bg,
    borderBottomLeftRadius: 45,
    borderBottomRightRadius: 45,
    shadowOffset: { width: 0, height: 15 },
    shadowColor: colors.theme_bg,
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 10,
  },
  header_card: {
    alignItems: "center",
    borderRadius: 15,
    justifyContent: "center",
  },
  header_card_item: {
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    shadowOffset: { width: 0, height: 15 },
    shadowColor: colors.theme_bg,
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 10,
  },
  icon:{
    color:colors.theme_fg_two
  },
  header_body: {
    flex: 3,
    justifyContent: 'center'
  },
  title:{
    alignSelf:'center', 
    color:colors.theme_fg_two,
    alignSelf:'center', 
    fontSize:16, 
    fontFamily:font_title
  },
  footer_container:{
    width:'100%', 
    backgroundColor:colors.theme_bg
  },
  btn_cart:{
    color:colors.theme_fg_three, 
    fontWeight:'bold',
    backgroundColor:colors.theme_bg
    
  }
});