import React, { PureComponent } from 'react';
import { Text, Platform, ActivityIndicator, View, StyleSheet } from 'react-native';
import * as _ from 'lodash';
import { WebView } from 'react-native-webview';
import Ionicons from 'react-native-vector-icons/Ionicons';

import { primaryTextColor } from '../commonColors';
import ProductSection from '../atoms/ProductSection';
import Header from './Header';
import NavCloseButton from '../atoms/NavCloseButton';
import OptionGroup from '../atoms/OptionGroup';
import { OBLightModal } from '../templates/OBModal';
import { cssCode } from '../../utils/webview';
import { eventTracker } from '../../utils/EventTracker';

const styles = {
  title: {
    fontSize: 15,
    fontWeight: 'bold',
    fontStyle: 'normal',
    lineHeight: 15,
    letterSpacing: 0,
    textAlign: 'left',
    color: primaryTextColor,
  },
  activityIndicator: {
    ...StyleSheet.absoluteFill,
    alignItems: 'center',
    justifyContent: 'center',
  },
  webviewWrapper: {
    paddingHorizontal: 6,
    flex: 1,
  },
  emptyWrapper: {
    flex: 1,
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: 185,
  },
  emptyIcon: {
    marginBottom: 10,
  },
  emptyText: {
    color: '#8a8a8f',
    fontSize: 15,
    width: 294,
    textAlign: 'center',
  },
};

export default class ProductPolicy extends PureComponent {
  state = {
    showModal: false,
    showSpinner: true,
  };

  handleShowModal = () => {
    const { policy } = this.props;
    eventTracker.trackEvent(`ListingSectionTapped-${policy}`);
    this.setState({ showModal: true });
  };

  handleHideModal = () => {
    this.setState({ showModal: false });
  };

  handleHideSpinner = () => {
    this.setState({ showSpinner: false });
  }

  renderEmptyContent = policy => (
    <View style={styles.emptyWrapper}>
      <Ionicons style={styles.emptyIcon} name="ios-document" size={50} color="#8a8a8f" />
      <Text style={styles.emptyText}>
        {`No ${policy.toLowerCase()} provided`}
      </Text>
    </View>
  );

  render() {
    const { policy, content } = this.props;
    const { showModal, showSpinner } = this.state;
    return (
      <ProductSection>
        <OptionGroup onPress={this.handleShowModal} noBorder>
          <Text style={styles.title}>{policy}</Text>
        </OptionGroup>
        <OBLightModal
          animationType="slide"
          transparent
          visible={showModal}
          onRequestClose={this.handleHideModal}
        >
          <Header modal left={<NavCloseButton />} onLeft={this.handleHideModal} />
          {_.isEmpty(content) ? (
            this.renderEmptyContent(policy)
          ) : (
            <View style={styles.webviewWrapper}>
              <WebView
                onLoadStart={this.handleHideSpinner}
                onError={this.handleHideSpinner}
                originWhitelist={['*']}
                source={{
                  html: `${cssCode} ${content}`,
                  baseUrl: '',
                }}
                // injectedJavaScript={jsCode}
                // javaScriptEnabled
                scalesPageToFit={Platform.OS === 'android'}
                useWebKit={false}
              />
            </View>
          )}
          {!_.isEmpty(content) && showSpinner && (
            <View style={styles.activityIndicator}>
              <ActivityIndicator size="large" color="#8a8a8f" />
            </View>
          )}
        </OBLightModal>
      </ProductSection>
    );
  }
}