import React, { Component } from 'react';
import { View, WebView, ScrollView, LayoutAnimation, Dimensions } from 'react-native';
import { ElliotNewsStyles } from './styles/elliotNewsDetailed.styles';
import Fonts from '../../../styles/fonts';
import Colors from '../../../styles/colors';
import Navbar from '../../../shared/components/navbar/navbar';
import SourceSansProText from '../../../shared/components/text/source-sans-pro/source-sans-pro';
import ApiDispatcher from '../../../shared/dispatcher/api-dispatcher';
import RaisedButton from '../../../shared/components/button/raised/raised-button';

const injectedJS =
`window.onscroll = function() {
  var goToEnd = false
  // if(this.scrollTop + this.height() == document.height()) {
  //     goToEnd = true
  // }

  const message = {
    scrollTop: document.documentElement.scrollTop || document.body.scrollTop, //this.scrollY,
    offsetHeight: document.documentElement.clientHeight || document.body.clientHeight,// this.innerHeight,
    goToEnd
  }
  window.postMessage(JSON.stringify(message))
}`


export default class ElliotNewsDetailed extends React.Component {
  constructor(props) {
    super(props)
    this.dispatcher = new ApiDispatcher()

    this.state = {
      elliotNews: {},
      isTitlesVisible: true,
      isButtonOkElliotVisible: false,
      webviewHeight: 300,
      _viewOffset: 0,
      _viewHeight: 0,
      _viewContentHeight: 0,
      _screenHeight: 0,
      isFirstTime: true,
      currentScroll: 0,
      maxScroll: 0,
      teste: ''
    }
  }

  componentDidMount() {
    const { elliotNews } = this.props.navigation.state.params;
    this.setState({
      elliotNews: elliotNews
    });
}

  setAsRead = (callBack) => {
    this.dispatcher.setElliotNewsAsRead(this.state.elliotNews.id)
    .then(callBack)
    .catch(err => {
        Sentry.captureException(JSON.stringify(err))
        console.log(err)
    })
  }

  goBack = () => {
    this.setAsRead()
    this.props.navigation.goBack();
  }

  _onLayout = (event) => {
    const { height } = event.nativeEvent.layout
    const dimensions = Dimensions.get('screen');
    const screenHeight = dimensions.height;
    this.setState({ _viewHeight: height, _screenHeight: screenHeight })
  }

  _onContentSizeChange = (contentWidth, contentHeight) => {
    this.setState({ _viewContentHeight: contentHeight })
  }

  getMaxScroll = (scrollTop, maxScroll, isButtonOkElliotVisible) => {
    if (isButtonOkElliotVisible)
      scrollTop += 25

    if (scrollTop > maxScroll)
      return scrollTop

    return maxScroll - 5
  }

  _onMessage(event) {
    console.log('data', JSON.parse(event.nativeEvent.data))

    const {
      scrollTop,
      offsetHeight,
      goToEnd
    } = JSON.parse(event.nativeEvent.data)

    console.log(goToEnd)

    const CustomLayoutLinear = {
      duration: 100,
      create: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity },
      update: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity },
      delete: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity }
    }
    const isButtonOkElliotVisible = scrollTop == this.state.maxScroll // direction === 'down'
   // const maxScrollToComparater = this.state.maxScroll - 5
    const maxScroll = this.getMaxScroll(scrollTop, this.state.maxScroll, isButtonOkElliotVisible)

    const direction = scrollTop > 0 &&
      ((scrollTop > this.state.currentScroll && this.state.currentScroll <= maxScroll) ||
        scrollTop > maxScroll) ? 'down' : 'up'

    const isTitlesVisible = true
    if (isTitlesVisible !== this.state.isTitlesVisible) {
      LayoutAnimation.configureNext(CustomLayoutLinear)
      this.setState({ isTitlesVisible })
    }


    if (isButtonOkElliotVisible != this.state.isButtonOkElliotVisible) {
      LayoutAnimation.configureNext(CustomLayoutLinear)
      this.setState({ isButtonOkElliotVisible })
    }

    // Update your scroll position
    this.setState({ currentScroll: scrollTop, maxScroll: maxScroll, teste: direction })
  }


  render() {
    return (
      <ScrollView style={ElliotNewsStyles.scrollView} contentContainerStyle={ElliotNewsStyles.scrollViewContent}
                  onLayout={this._onLayout} onContentSizeChange={this._onContentSizeChange}
                  showsHorizontalScrollIndicator={false} >

        <Navbar title="Elliot News" onLeftPress={this.goBack} leftIconIsBack={true} style={ElliotNewsStyles.navbar}/>

        {this.state.isTitlesVisible ?
        // {1 ===1 ?
        <View style={ElliotNewsStyles.header}>
          {/* <SourceSansProText text={this.state.elliotNews.articleTitle} fontSize={22} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.SemiBold}></SourceSansProText>
          <SourceSansProText text={this.state.elliotNews.articleSubtitle} fontSize={18} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText>
          <SourceSansProText text={this.state.elliotNews.releaseDate} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText> */}
          <SourceSansProText text={'_viewHeight: ' + this.state._viewHeight} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText>
          {/* <SourceSansProText text={'_viewOffset: ' + this.state._viewOffset} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText> */}
          <SourceSansProText text={'_viewContentHeight: ' + this.state._viewContentHeight} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText>
          <SourceSansProText text={'_screenHeight: ' + this.state._screenHeight} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText>
          <SourceSansProText text={'currentScroll: ' + this.state.currentScroll} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText>
          <SourceSansProText text={'maxScroll: ' + this.state.maxScroll} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText>
          <SourceSansProText text={'teste: ' + this.state.teste} fontSize={14} color={Colors.BlackGray} fontWeight={Fonts.Weights.SourceSansPro.Light}></SourceSansProText>
        </View> : null}

        <View style={ElliotNewsStyles.content} scrollEnabled={false} >

          <WebView source={{ html: this.state.elliotNews.articleBody }}
            startInLoadingState={true}
            scrollEnabled={true}
            automaticallyAdjustContentInsets={false}
            javaScriptEnabled={true}
            injectedJavaScript={injectedJS}
            onMessage={this._onMessage.bind(this)}
            style={{padding: 5,
                    backgroundColor:Colors.Transparent, overflow: 'hidden'
                  }}
          />

          {this.state.isButtonOkElliotVisible ?
          <View style={ElliotNewsStyles.button}>
            <RaisedButton fontSize={16} text={'Ok, Elliot !'} isRadius={true} isElliot={true}
                          width="85%" onPress={() => this.goBack()} ></RaisedButton>
          </View> : null}
        </View>

        {/* {this.state.isButtonOkElliotVisible ?
          <View style={ElliotNewsStyles.button}>
            <RaisedButton fontSize={16} text={'Ok, Elliot !'} isRadius={true} isElliot={true}
                          width="85%" onPress={() => this.goBack()} ></RaisedButton>
          </View> : null} */}

      </ScrollView>
    );
  }
}