import React, { Component } from "react";
import {
  StyleSheet,
  WebView,
  View,
  Image,
  Dimensions,
  ScrollView,
  Text,
  TouchableOpacity,
  Clipboard,
  Alert,
  Share
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";

export default class Discover extends Component {
  constructor(props) {
    super(props);
    this.state = {
      word: "",
      date: {},
      result: ""
    };
  }
  handleCopyPress(string) {
    Clipboard.setString(string);
  }
  componentWillMount() {
    this.getImages();
  }
  getImages() {
    let that = this,
      id = this.state.id,
      model = this.state.model;
    return fetch(`https://devpay.brae.co/test/insurance/wallpaper`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then(resp => {
        console.log("大爷", resp);
        if (resp.status === 200) {
          return resp.json();
        } else {
          console.error("something went wrong!");
        }
      })
      .then(respJson => {
        if (respJson.enmsg != "ok") {
          alert(respJson.cnmsg);
        } else {
          that.setState({
            word: respJson.data.word,
            date: respJson.data.date
          });
          console.log("发现", respJson.data);
        }
      });
  }
  copyWords(string) {
    Clipboard.setString(string);
  }
  ShareSomething() {
    const that = this;
    console.log("share")
    Share.share({
      title: "保护神",
      message: that.state.word,
      url: "http://www.baidu.com"
      // url: `http://reactnative.cn/docs/0.48/share.html?userid=${1}&articleid=${2}`
    },{
      // dialogTitle: 'Share React Native website',
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter'
      ],
      tintColor: 'green'
    })
      .then(that._showResult)
      .catch(error => this.setState({ result: "error: " + error.message }));
  }
  _showResult(result) {
    if (result.action === Share.sharedAction) {
      if (result.activityType) {
        this.setState({
          result: "shared with an activityType: " + result.activityType
        });
      } else {
        this.setState({ result: "shared" });
      }
    } else if (result.action === Share.dismissedAction) {
      this.setState({ result: "dismissed" });
    }
  }

  render() {
    const { word, date } = this.state;
    return (
      <Image
        style={styles.container}
        source={require("../../assets/discover/bg.png")}
      >
        <View style={styles.date}>
          <Text style={styles.day}>{date.day}</Text>
          <View style={styles.leftContaier}>
            <Text style={styles.month}>{date.month}</Text>
            <Text style={styles.week}>{date.week}</Text>
          </View>
        </View>
        <View style={styles.wordConatier}>
          <Text style={styles.word}>{word}</Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            this.copyWords(word);
          }}
        >
          <Image
            style={styles.btnImg}
            source={require("../../assets/discover/ic_copy.png")}
          />
          <Text style={styles.btnText}>复制文案</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.shareContaier}
          onPress={() => {
            this.ShareSomething();
          }}
        >
          <Text style={styles.shareText}>分享</Text>
        </TouchableOpacity>
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height
  },
  date: {
    backgroundColor: "rgba(255,255,255,0)",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 100,
    marginRight: 100,
    marginTop: 25,
    marginBottom: 25
  },
  day: {
    fontSize: 75,
    color: "#fff"
  },
  leftContaier: {
    marginLeft: 12
  },
  month: {
    fontSize: 23,
    color: "#fff"
  },
  week: {
    fontSize: 17,
    color: "#fff"
  },
  wordConatier: {
    backgroundColor: "#FFFFFF",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    marginLeft: 20,
    marginRight: 20,
    paddingLeft: 22,
    paddingRight: 22,
    paddingTop: 28,
    paddingBottom: 28
  },
  word: {
    fontSize: 15,
    color: "#242424",
    lineHeight: 24
  },
  button: {
    width: Dimensions.get("window").width,
    backgroundColor: "rgba(255,255,255,0)",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    bottom: 150
  },
  btnImg: {
    width: 13,
    height: 15,
    marginRight: 5
  },
  btnText: {
    color: "white",
    fontSize: 15
  },
  shareContaier: {
    width: Dimensions.get("window").width - 40,
    backgroundColor: "#1B9341",
    justifyContent: "center",
    alignItems: "center",
    marginVertical: 20,
    paddingVertical: 10,
    marginHorizontal: 20,
    borderRadius: 5
  },
  shareText: {
    color: "white",
    fontSize: 15
  }
});