import React, { Component } from 'react'
import { View, StyleSheet, Linking, TouchableOpacity } from 'react-native'
import Image from 'react-native-fast-image'
import { WebView } from 'react-native-webview';
import { Badge } from 'native-base'
import Icon from '../../components/Icon'
import Text from '../../components/Text';
import LinearGradient from 'react-native-linear-gradient';
import { BackgroundImage } from '../../components/BackgroundImage'
import { getProductDetail } from '../../api/UserApi';
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from 'src/utils/i18n'
import ImageView from 'react-native-image-view';
var uri = null;
const injectScript = `
  (function () {
    window.onclick = function(e) {
      e.preventDefault();
      window.postMessage(e.target.href);
      e.stopPropagation()
    }
  }());
`;

export default class RewardDetailScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      isImageViewVisible: false,
      product_id: this.props.navigation.getParam('product_id', 'NO ITEM'),
      product: {}
    };
  }

  componentDidMount(){
    this.initData()
  };

  initData(){
    getProductDetail(this.state.product_id)
    .then(res => {
      if(res.ok){
        console.log('data product id ------------> ',res)
        this.setState({
          isLoading: false,
          product: res.data.data
        })
      }
    })
  }

  onMessage({ nativeEvent }) {
    const data = nativeEvent.data
    if (data !== undefined && data !== null) {
      Linking.openURL(data);
    }
  }

  render() {
    const styles = StyleSheet.create({
      textNews: {
        backgroundColor: '#0D8890',
        width: 60,
        color: '#FFFFFF',
        borderRadius: 5,
        textAlign: 'center',
        fontSize: 12
      }
    })
    const { navigation } = this.props;
    const detail = navigation.getParam('item', 'NO ITEM');
    const images = [
      {
        source: {
          uri: this.state.product.image_url,
        }
      },
    ];
    // console.log('uri',this.state.product.image_url);
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <BackgroundImage>
          <ImageView
            images={images}
            imageIndex={0}
            isVisible={this.state.isImageViewVisible}
            animationType={'fade'}
            onClose={() => {this.setState({isImageViewVisible: false})}}
          />
          <TouchableOpacity style={{backgroundColor:'white',borderBottomWidth:1,borderColor:'silver'}} onPress={() => {this.setState({isImageViewVisible: true})}}>
            <Image source={{ uri: this.state.product.image_url }} defaultSource={require('../../../assets/images/logo_2.png')} style={{height: 200,}} resizeMode={'contain'}/>
          </TouchableOpacity>
          <View style={{ backgroundColor: 'white', padding: 15 }}>
            <Text style={{ color: '#00420A', fontSize: 16, }}>{this.state.product.name}</Text>
          </View>
          <View style={{ padding:15, paddingBottom:0 }}>
            <Text style={{ color: 'white', fontSize: 16, }} > {t('detail')} </Text>
          </View>
          <WebView
            style={{
              margin:12,
              marginTop:0,
              backgroundColor: 'rgba(0,0,0,0)' ,
              flex: 1,
            }}
            ref={(ref) => { this.webview = ref; }}
            bounces={true}
            // dataDetectorTypes={['link', 'phoneNumber']}
            originWhitelist={['*']}
            source={{ baseUrl: '', html: ` ${this.state.product && this.state.product.style ? this.state.product.style : '' } <div id="content_detail"><meta charset="UTF-8"> ${this.state.product && this.state.product.description && this.state.product.description !== null && this.state.product.description !== 'null' ? this.state.product.description : ''} </div>` }}
            injectedJavaScript={injectScript}
            onMessage={this.onMessage}
          />
        </BackgroundImage>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </LinearGradient>
    );
  }
}
