import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Image,
  Share,
  Alert,
  Linking,
} from 'react-native';
import FastImage from 'react-native-fast-image';
import Icon from 'react-native-vector-icons/FontAwesome5';
import StepIndicator from 'react-native-step-indicator';
import Modal, {ModalContent} from 'react-native-modals';
import Switch from 'react-native-switch-pro';
import {colors} from '../../assets/styles/colors-theme';
import {Fonts} from '../../assets/styles/fonts-theme';
import Realm from 'realm';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import LoadingView from '../../common/loading';
import {WebView} from 'react-native-webview';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import Migrations from '../../services/realm/Mirgrations';
import BackHeader from '../../components/backHeader';
import {inject, observer} from 'mobx-react';
import {observable} from 'mobx';
import {queryUser} from '../../services/realm/realmManger';
import AsyncStorageHelper from '../../common/asyncStorageHelper';
import ImagePicker from 'react-native-image-crop-picker';
import {
  UserSchemea,
  ApartmentSchemea,
  DocSchemea,
  NotificationSchemea,
} from '../../services/realm/schemeas';
import {width, height} from '../../common/screen';
const asyncStorageHelper = new AsyncStorageHelper();

let realm = new Realm({
  schema: [UserSchemea, ApartmentSchemea, DocSchemea, NotificationSchemea],
});

@inject('appStore')
@observer
export default class BannerDetails extends Component {
  @observable
  data = null;

  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.data = this.props.navigation.state.params.data;
  }

  componentDidMount() {}

  talkToHelperAction() {
    if (this.store.logined) {
      var msgContent = this.data.chatMsg;
      Alert.alert(
        '',
        '客服聯絡方法',
        [
          {
            text: '取消',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel',
          },
          {
            text: '致電 Rent Chat',
            onPress: () => {
              Linking.openURL(`tel:${'31040558'}`);
            },
          },
          {
            text: '在線對話',
            onPress: () => this.store.gotohelperChat(this, msgContent),
          },
        ],
        {cancelable: false},
      );
    } else {
      if (this.store.user == null) {
        Alert.alert(
          '',
          '客服聯絡方法',
          [
            {
              text: '取消',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
            {
              text: '致電 Rent Chat',
              onPress: () => {
                Linking.openURL(`tel:${'31040558'}`);
              },
            },
          ],
          {cancelable: false},
        );
      } else {
        Alert.alert(
          '',
          this.store.text.pleaseLogin,
          [
            {
              text: this.store.text.cancel,
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
            {
              text: this.store.text.login,
              onPress: () => {
                history.push(this, '/signin', {icon: true});
              },
            },
          ],
          {cancelable: false},
        );
      }
    }
  }

  render() {
    console.log(this.data);
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'white',
        }}>
        <BackHeader instance={this} back={true} title={this.data.title} />
        <LoadingView visible={this.store.loading} />
        <View style={{flex: 0.95}}>
          <WebView source={{uri: this.data.link}} style={{flex: 1}} />
        </View>
        {this.data.chatWithCs ? (
          <TouchableOpacity
            onPress={() => {
              this.talkToHelperAction();
            }}
            disabled={this.store.loading}
            style={styles.buttonView}>
            <Text style={styles.buttonText}>
              {this.store.text.talkToHelper}
            </Text>
          </TouchableOpacity>
        ) : (
          <View />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  buttonView: {
    backgroundColor: colors.mainColor,
    marginRight: 30,
    marginLeft: 30,
    marginTop: 10,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 15,
    fontFamily: Fonts.ubuntu,
    color: 'white',
  },
});
