import React, { Component } from "react";
import {
  StyleSheet,
  WebView,
  View,
  Image,
  Dimensions,
  ScrollView,
  Text,
  FlatList,
  ListView,
  Share,
  TouchableOpacity,
  AsyncStorage,
  Alert
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import post from "../utils/fetch";

export default class ArticleTemplate extends Component {
  static navigationOptions = ({ navigation }) => {
    const { state, setParams, navigate } = navigation;
    return {
      headerRight: (
        <TouchableOpacity
          style={{ marginRight: 13 }}
          onPress={() => state.params.share()}
        >
          <Text style={{ fontSize: 16, color: "#0071E1" }}>分享</Text>
        </TouchableOpacity>
      )
    };
  };
  constructor(props) {
    super(props);
    this.state = {
      IS_LOGIN: "",
      USER_ID: "",
      id: this.props.navigation.state.params.item.id,
      model: this.props.navigation.state.params.model,
      type: this.props.navigation.state.params.type,
      articleData: {
        paragraph: [],
        NICKNAME: "",
        IS_LOGIN: "",
        USER_ID: "",
        COMPANY: "",
        PHONE: ""
      }
    };
  }

  componentWillMount() {
    console.log("will  model", this.state.model);
    this.getArticles();
    this.getAsyncStorage();
    this.props.navigation.setParams({
      share: this.share.bind(this)
    });
  }
  componentDidMount() {}

  share() {
    const that = this;
    AsyncStorage.multiGet(["IS_LOGIN", "USER_ID"], (err, result) => {
      if (err) {
        console.error(err);
      }
      that.setState(
        {
          IS_LOGIN: result[0][1],
          USER_ID: result[1][1] != null ? result[1][1] : ""
        },
        () => {
          if (that.state.IS_LOGIN != "yes") {
            Alert.alert("请先登录账号");
          } else {
            Share.share(
              {
                title: "保护神",
                message: that.state.articleData.title,
                url:
                  that.state.type == "home"
                    ? `https://devpay.brae.co/insurance.html?uid=${this.state
                        .USER_ID}&tid=${that.state.id}`
                    : `https://devpay.brae.co/insurance.html?uid=${this.state
                        .USER_ID}&sid=${that.state.id}`
              },
              {
                excludedActivityTypes: [
                  "com.apple.UIKit.activity.PostToTwitter"
                ],
                tintColor: "green"
              }
            )
              .then(that._showResult)
              .catch(error =>
                this.setState({ result: "error: " + error.message })
              );
          }
        }
      );
    });
  }

  getAsyncStorage() {
    const that = this;
    AsyncStorage.multiGet(
      ["IS_LOGIN", "USER_ID", "NICKNAME", "COMPANY", "PHONE"],
      (err, result) => {
        if (err) {
          console.error(err);
        }
        that.setState({
          IS_LOGIN: result[0][1],
          USER_ID: result[1][1] != null ? result[1][1] : "",
          NICKNAME: result[2][1] != null ? result[2][1] : "",
          COMPANY: result[3][1] != null ? result[3][1] : "",
          PHONE: result[4][1] != null ? result[4][1] : ""
        });
      }
    );
  }
  getArticles() {
    let that = this,
      id = this.state.id,
      model = this.state.model;
    return fetch(`https://devpay.brae.co/test/insurance/${model}/${id}`, {
      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({
            articleData: respJson.data.data.articleData
          });
          console.log("详情页的文章", respJson.data.data.articleData);
        }
      });
  }
  render() {
    const { articleData } = this.state;
    return (
      <View style={styles.container}>
        <ScrollView automaticallyAdjustContentInsets={false}>
          <View style={styles.headerContaier}>
            <Text style={styles.headerTitle}>{articleData.title}</Text>
            <View style={styles.infoWrapper}>
              <Text style={styles.time}>{articleData.time}</Text>
              {this.state.IS_LOGIN == "yes" ? (
                <Text style={styles.author}>{this.state.NICKNAME}</Text>
              ) : null}
              <Text style={styles.author}>{articleData.author}</Text>
            </View>
          </View>
          {this.state.IS_LOGIN == "yes" ? (
            <View style={styles.businerrCardContaier}>
              <Image
                style={styles.BCLeftImg}
                source={require("../assets/Mine/1.png")}
              />
              <View style={styles.BCRightContaier}>
                <Text style={styles.BCText}>{this.state.NICKNAME}</Text>
                {this.state.COMPANY ? (
                  <Text style={styles.BCText}>{this.state.COMPANY}</Text>
                ) : null}
                <Text style={styles.BCText}>{this.state.PHONE}</Text>
              </View>
            </View>
          ) : null}

          <View style={styles.contentConatiner}>
            {articleData.paragraph.map((item, index) => {
              return (
                <View style={styles.paragraphContainer} key={index}>
                  {item.title ? (
                    <Text style={styles.paragraphTitle}>{item.title}</Text>
                  ) : null}
                  {item.image ? (
                    <Image
                      style={{
                        width: item.width,
                        height: item.height,
                        alignSelf: "center",
                        marginBottom: 20
                      }}
                      resizeMode="contain"
                      source={{ uri: item.image }}
                    />
                  ) : null}
                  <Text style={styles.paragraphContent}>
                    {"        " + item.content}
                  </Text>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  headerContaier: {
    marginTop: 23,
    marginLeft: 15,
    marginRight: 15
  },
  headerTitle: {
    color: "#030303",
    fontSize: 24,
    lineHeight: 30
  },
  infoWrapper: {
    marginTop: 10,
    flexDirection: "row"
  },
  time: {
    fontSize: 15,
    color: "#999999",
    marginRight: 8
  },
  author: {
    fontSize: 15,
    color: "#999999",
    marginRight: 5,
  },
  businerrCardContaier: {
    flexDirection: "row",
    alignItems: "center",
    marginHorizontal: 20,
    marginVertical: 10,
    backgroundColor: "#D7D7D7",
    borderRadius: 5,
    paddingHorizontal: 20,
    paddingVertical: 10
  },
  BCLeftImg: {
    width: 50,
    height: 50
  },
  BCRightContaier: {
    marginLeft: 20,
    flex: 1,
    justifyContent: "center",
  },
  BCText: {
    fontSize: 13,
    lineHeight: 22,
    color: "white"
  },
  contentConatiner: {
    marginTop: 20,
    marginLeft: 15,
    marginRight: 15
  },
  paragraphContainer: {
    marginTop: 20,
    marginBottom: 20
  },
  paragraphTitle: {
    alignSelf: "center",
    color: "#1B9341",
    fontSize: 15,
    marginBottom: 15,
    lineHeight: 28,
    textAlign: "center"
    // backgroundColor: "red",
  },
  paragraphImage: {
    // width: Dimensions.get("window").width - 30,
    // height: 140,
    // backgroundColor: "blue",
    marginBottom: 20
  },
  paragraphContent: {
    color: "#555555",
    fontSize: 15,
    lineHeight: 25
    // backgroundColor: "yellow",
  }
});