import React, { Component } from "react";
import * as Progress from "react-native-progress";
import {
  Text,
  TouchableOpacity,
  View,
  ScrollView,
  RefreshControl
} from "react-native";
import Dataset from "impagination";
import { Container } from "native-base";
import { Icon } from "react-native-elements";
import Api from "../../../Services/Api";
import firebase from 'react-native-firebase';
import CommonHeader from "../../../Components/CommonHeader";
import DashboardCardView from "../../../Components/DashboardCardView";
import SampleDashBoardCard from "../../../Components/SampleDashBoardCard";
import Modal from "react-native-modalbox";
// Styles
import DeviceInfo from 'react-native-device-info';
import styles from "./DashboardScreenStyle";

export default class DashboardScreen extends Component {
  static navigationOptions = {
    title: "Dashboard",
    drawerIcon: ({ tintColor }) => (
      <Icon
        name="md-home"
        type="ionicon"
        style={[styles.icon, { color: tintColor }]}
      />
    )
  };
  constructor(props) {
    super(props);

    this.state = {
      dataset: null,
      datasetState: null,
      refreshing: false,
      viewedmeFlag: false,
      FavouriteFlag: false,
      FavouriteMeFlag: false,

      // Top bar loading state
      progressHide: false
    };
  }




  _onRefresh = () => {
    this.setState({ refreshing: true });
    this.componentDidMount(this);
    this.setState({ refreshing: false });
  };
  componentDidMount() {
    this.setupFMessaging()
    this.testingUserMessage()
    this.setupImpaginationOfRecentUsers();
    this.setupImpaginationOfInterestFavourite();
    this.setupImpaginationOfInterestViewedMe();
    this.setupImpaginationOfInterestFavouritedMe();
  }


// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                      //
                        //
                          //
                            //                       S  E  T  U  P   ------>    F  C  M         T  O  K  E  N
                              //
                                //
                                  //
                                    //
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// complete setup firebase
setupFMessaging = async () => {
  await this.firebaseCheckPermission().then(IsUserPer => {
    if(IsUserPer == true){
       this.firebaseGetToken().then(deviceToken => {
         this.getDeviceId().then(deviceId => {
          console.log(deviceToken)
          console.log(deviceId)
         Api.registerDeviceToken(deviceId,deviceToken).then(res => {
           console.log('yahoo')
           console.log(res)

         }).catch(err => console.log(err))
         })
      })
    }else{
       this.firebaseRequestPermission().then(() => {
         this.firebaseGetToken().then(token => {
           this.getDeviceId().then(deviceId => {
             console.log(token)
             console.log(deviceId)
            Api.registerDeviceToken(deviceId,deviceToken).then(res => {
              console.log('yahoo')
              console.log(res)

            }).catch(err => console.log(err))

          })
        })
      }).catch(() => { this.setState({ errMsg : 'Your device is not supported to notifications' })
      this.refs.errAlert.open() })
    }
  })
}


// Get device token
firebaseGetToken =  async () => {
  return new Promise(async (resolve, reject) => {
    await firebase.messaging().getToken().then(fcmToken => {
      if (fcmToken) {
         resolve(fcmToken)
      } else {
        reject('Your device is not supported to notifications')
      }
    });
  })
}
// Checking user permission
firebaseCheckPermission = async () => {
  return new Promise(async (resolve,reject) => {
    await firebase.messaging().hasPermission()
    .then(enabled => {
      if (enabled) {
        resolve(true)
      } else {
        reslove(false)
      }
    });
  })

}
// Request firebase permission
firebaseRequestPermission = async () => {
  return new Promise(async (resolve,reject) => {
    try {await firebase.messaging().requestPermission().then( resolve(true))} catch (error) { reject('Your device is not supported to notifications') }
  })
}




// get specific device unique id
getDeviceId = async () => {
  return new Promise(async (resolve,reject) => {
    let deviceId=  DeviceInfo.getUniqueID()
    resolve(deviceId)
  })
}


testingUserMessage = async () => {
  this.messageListener = firebase.messaging().onMessage((msg) => {
    console.log(msg)
  })
}

// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                      //
                        //
                          //
                            //                       S  E  T  U  P   ------>    F  C  M         T  O  K  E  N
                              //
                                //
                                  //
                                    //
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////














gotoUserProfile = user => {
  this.props.navigation.navigate("UserProfile", { user_name: user });
};
// Setup Impagination of Recent Users
setupImpaginationOfRecentUsers() {
  let _this = this;

  let dataset = new Dataset({
    pageSize: 6,
    loadHorizon: 2,

    observe(datasetState) {
      _this.setState({ datasetState });
    },

    // Where to fetch the data from.
    fetch(pageOffset, pageSize, stats) {
      return Api.search("", pageOffset + 1, pageSize)
        .then(data => data.users)
        .catch(error => {
          _this.refs.errAlert.open();
          _this.setState({
            errMsg:
              "Looks like you are offline now. Please connect your connection and try again"
          });
        });
    }
  });
  dataset.setReadOffset(0);
  this.setState({ dataset });
}
// Setup Impagination of Interest favourite Users
setupImpaginationOfInterestViewedMe() {
  let _this = this;
  let dataset = new Dataset({
    pageSize: 15,
    loadHorizon: 15,

    observe(datasetStateOfInterestViewedMe) {
      _this.setState({ datasetStateOfInterestViewedMe });
    },

    // Where to fetch the data from.
    fetch(pageOffset, pageSize, stats) {
      return Api.interests("viewedme", pageOffset + 1, pageSize)
        .then(data => {
          if (data.users.length != 0) return data.users;
          else {
            _this.setState({ viewedmeFlag: true });
            return;
          }
        })
        .catch(error => {
          _this.refs.errAlert.open();
          _this.setState({
            errMsg:
              "Looks like you are offline now. Please connect your connection and try again"
          });
        });
    }
  });
  dataset.setReadOffset(0);
  this.setState({ dataset });
}

// Setup Impagination of Interest favourite Users
setupImpaginationOfInterestFavourite() {
  console.log("favourited");

  let _this = this;
  let dataset = new Dataset({
    pageSize: 15,
    loadHorizon: 15,
    observe(datasetStateOfInterestFavourite) {
      _this.setState({ datasetStateOfInterestFavourite });
    },
    // Where to fetch the data from.
    fetch(pageOffset, pageSize, stats) {
      return Api.interests("favourited", pageOffset + 1, pageSize)
        .then(data => {
          if (data.users.length != 0) return data.users;
          else {
            _this.setState({ FavouriteFlag: true });
            return;
          }
        })
        .catch(error => {
          _this.refs.errAlert.open();
          _this.setState({
            errMsg:
              "Looks like you are offline now. Please connect your connection and try again"
          });
        });
    }
  });
  dataset.setReadOffset(0);
  this.setState({ dataset });
}
// Setup Impagination of favourited Me Users
setupImpaginationOfInterestFavouritedMe() {
  console.log("favouritedme");
  let _this = this;
  let dataset = new Dataset({
    pageSize: 15,
    loadHorizon: 15,
    observe(datasetStateOfInterestFavouritedMe) {
      _this.setState({ datasetStateOfInterestFavouritedMe });
    },
    // Where to fetch the data from.
    fetch(pageOffset, pageSize, stats) {
      return Api.interests("favouritedme", pageOffset + 1, pageSize)
        .then(data => {
          if (data.users.length != 0) return data.users;
          else {
            _this.setState({ FavouriteMeFlag: true });
            return;
          }
        })
        .catch(error => {
          _this.refs.errAlert.open();
          _this.setState({
            errMsg:
              "Looks like you are offline now. Please connect your connection and try again"
          });
        });
    }
  });
  dataset.setReadOffset(0);
  this.setState({ dataset });
}

// =================================================================================================================================
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// =================================================================================================================================



  renderRecentUsers() {
    if (!this.state.datasetState) return null;

    const that = this;
    return this.state.datasetState.map(function(user, index) {
      if (
        !user ||
        !user.content ||
        !user.content.meta ||
        (user.isPending && !user.isSettled)
      ) {
        return <SampleDashBoardCard />;
      }
      return (
        <DashboardCardView user={user.content} onPress={that.gotoUserProfile} />
      );
    });
  }

  // =================================================================================================================================
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // =================================================================================================================================

  renderFavouritesUsers() {
    if (!this.state.datasetStateOfInterestFavourite) return null;

    const that = this;
    return this.state.datasetStateOfInterestFavourite.map(function(
      user,
      index
    ) {
      if (
        !user ||
        !user.content ||
        !user.content.meta ||
        (user.isPending && !user.isSettled)
      ) {
        return <SampleDashBoardCard />;
      }
      return (
        <DashboardCardView user={user.content} onPress={that.gotoUserProfile} />
      );
    });
  }

  // =================================================================================================================================
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // =================================================================================================================================
  renderViewedMeUsers() {
    if (!this.state.datasetStateOfInterestViewedMe) return null;

    const that = this;
    return this.state.datasetStateOfInterestViewedMe.map(function(user, index) {
      if (
        !user ||
        !user.content ||
        !user.content.meta ||
        (user.isPending && !user.isSettled)
      ) {
        return <SampleDashBoardCard />;
      }
      return (
        <DashboardCardView user={user.content} onPress={that.gotoUserProfile} />
      );
    });
  }
  // =================================================================================================================================
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // =================================================================================================================================
  renderFavouritedMe() {
    if (!this.state.datasetStateOfInterestFavouritedMe) return null;
    const that = this;
    return this.state.datasetStateOfInterestFavouritedMe.map(function(
      user,
      index
    ) {
      if (
        !user ||
        !user.content ||
        !user.content.meta ||
        (user.isPending && !user.isSettled)
      ) {
        return <SampleDashBoardCard />;
      }
      return (
        <DashboardCardView user={user.content} onPress={that.gotoUserProfile} />
      );
    });
  }
  // =================================================================================================================================
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // =================================================================================================================================

  render() {
    return (
      <Container>
        <CommonHeader title={"GoMarry"} />
        {this.state.progressHide == false && (
          <Progress.Bar
            width={450}
            color={"#FC3838"}
            height={1.5}
            borderWidth={0}
          />
        )}
        <ScrollView
          style={styles.mainContainerHome}
          showsVerticalScrollIndicator={false}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this._onRefresh}
            />
          }
        >
          <View style={styles.row}>
            <Text style={styles.maintitle}>Recently</Text>
            <TouchableOpacity
              onPress={() =>
                // this.props.navigation.navigate("AllRecentUsersScreen")
                this.props.navigation.navigate("ViewAll", {
                  title: "All Recent Me Users",
                  filter: "recent"
                })
              }
            >
              <Text style={styles.viewall}>View all</Text>
            </TouchableOpacity>
          </View>
          <ScrollView showsHorizontalScrollIndicator={false} horizontal={true}>
            {this.renderRecentUsers()}
          </ScrollView>
          {!this.state.FavouriteFlag && (
            <React.Fragment>
              <View style={styles.row}>
                <Text style={styles.maintitle}>Favourite Users</Text>
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate("ViewAll", {
                      section: "favourited",
                      title: "All Favourite Users"
                    })
                  }
                >
                  <Text style={styles.viewall}>View all</Text>
                </TouchableOpacity>
              </View>

              <ScrollView
                showsHorizontalScrollIndicator={false}
                horizontal={true}
              >
                {this.renderFavouritesUsers()}
              </ScrollView>
            </React.Fragment>
          )}

          {!this.state.viewedmeFlag && (
            <React.Fragment>
              <View style={styles.row}>
                <Text style={styles.maintitle}>Viewed me</Text>
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate("ViewAll", {
                      section: "viewedme",
                      title: "All Viewed Me Users"
                    })
                  }
                >
                  <Text style={styles.viewall}>View all</Text>
                </TouchableOpacity>
              </View>
              <ScrollView
                showsHorizontalScrollIndicator={false}
                horizontal={true}
              >
                {this.renderViewedMeUsers()}
              </ScrollView>
            </React.Fragment>
          )}
          {!this.state.FavouriteMeFlag && (
            <React.Fragment>
              <View style={styles.row}>
                <Text style={styles.maintitle}>Favourited me</Text>
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate("ViewAll", {
                      section: "favouritedme",
                      title: "All Favourited Me Users"
                    })
                  }
                >
                  <Text style={styles.viewall}>View all</Text>
                </TouchableOpacity>
              </View>

              <ScrollView
                showsHorizontalScrollIndicator={false}
                horizontal={true}
              >
                {this.renderFavouritedMe()}
              </ScrollView>
            </React.Fragment>
          )}

          {/* ERROR POPUP */}
          <Modal
            style={[styles.errAlert, styles.errAlert3]}
            position={"center"}
            ref={"errAlert"}
            backdrop={true}
            coverScreen={true}
            backdropPressToClose={false}
          >
            <View>
              <View
                style={{
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <Icon
                  type="antdesign"
                  name="closecircle"
                  size={50}
                  color={"#FC3838"}
                />
              </View>
              <View
                style={{ paddingLeft: 20, paddingRight: 10, paddingTop: 15 }}
              >
                <Text style={{ textAlign: "center", fontSize: 14 }}>
                  {this.state.errMsg}
                </Text>
              </View>
              <View style={{ marginTop: 10 }}>
                <Text
                  onPress={() => this.refs.errAlert.close()}
                  style={{
                    color: "#FC3838",
                    fontWeight: "bold",
                    textAlign: "center"
                  }}
                >
                  Review Credientials !
                </Text>
              </View>
            </View>
          </Modal>
        </ScrollView>
      </Container>
    );
  }
}