import React, { Component } from "react";
import {
  View,
  Animated,
  Image,
  Text,
  LayoutAnimation,
  TouchableOpacity
} from "react-native";
import MapboxGL from "@mapbox/react-native-mapbox-gl";
import Interactable from "react-native-interactable";
import { linear } from "everpolate";
import { RenderIf, NOOP } from "mt-utils";
import { DelayRenderer } from "mt-components";
import { WIDTH_PHONE, HEIGHT_PHONE, smallHitSlop } from "mt-constants/style";

import boite from "mt-components/svg/map/pins/Pinboiteauxlettres";
import poste from "mt-components/svg/map/pins/Pinposte";
import pickup from "mt-components/svg/map/pins/Pinpickup";
import Cross from "mt-components/svg/map/Cross";
import SliderItem from "./slider-item";
import Pager from "./pager";
import Content from "./content";
import Ovni from "./ovni";
import style from "./style";

const ACCESS_TOKEN =
  "pk.eyJ1IjoibWFsaW52ZXJuaSIsImEiOiJjamJkejU0NmIwMHg2MzNrOTBzM3c3NnZjIn0.8sFiXIrekHwjEdK5ZGHHhQ";

const PINS = {
  boite,
  pickup,
  poste
};

export default class Map extends Component {
  constructor(props) {
    super(props);
    this.mapIsMounted = false;
    this.mapOpacity = new Animated.Value(0);
    this.translateContent = new Animated.Value(400);
    this.translateMap = new Animated.Value(0);
    this.overlayOpacity = new Animated.Value(0);
    this.transform = { transform: [{ translateY: this.translateContent }] };
    this.transformMap = { transform: [{ translateY: this.translateMap }] };
    this.deltaY = new Animated.Value(0);
    this.offset = new Animated.Value(0);
    this.state = {
      index: 0,
      isReady: false
    };
  }

  componentWillMount = () => {
    return MapboxGL.setAccessToken(ACCESS_TOKEN);
  };

  componentDidMount = () => {
    const { disableDismissable } = this.props;
    return disableDismissable();
  };

  componentWillReceiveProps = next => {
    if (!this.props.isOpen && next.isOpen) {
      return this.openingAnimation();
    }
  };

  getIndicatorContent = () => {
    const { points } = this.props;
    const { moving, searching, index } = this.state;
    if (!moving && !searching)
      return `${Math.round(points[index] && points[index].distance)} m`;
    if (searching) return "Recherche en cours";
    if (moving) return "Rechercher ici";
    return "";
  };

  onMapLayout = () => {
    const { points } = this.props;
    if (this.mapIsMounted) return;
    this.mapIsMounted = true;
    if (points[0]) {
      const coordinates = this.getLatLong(points[0]);
      //Animated.delay(800).start(() => this.map.moveTo(coordinates));
    }
  };

  onSliderRelease = () => {
    const {points} = this.props;
    const {index} = this.state;
    const coordinate = this.getLatLong(points[index + 1]);
    return this.map.flyTo(coordinate, 800);
  }

  onScrollEnd = index => {
    LayoutAnimation.easeInEaseOut();
    return this.setState({ index });
  };

  getLatLong = data => {
    const { coordinates } = data.location;
    const lng = coordinates[1];
    const lat = coordinates[0];
    return [lng, lat];
  };

  onWillChange = () => {

    /*

    return this.setState({ moving: true, searching: false }, () => {
      return Animated.spring(this.overlayOpacity, {
        toValue: 1,
        useNativeDriver: true
      }).start();
    }); */

  };

  onDidChange = () => {

    /*

    return this.setState({ moving: false, searching: true }, () => {
      return Animated.spring(this.overlayOpacity, {
        toValue: 0,
        useNativeDriver: true
      }).start();
    }); */
  };

  openingAnimation = () => {
    Animated.parallel([
      Animated.spring(this.mapOpacity, {
        toValue: 1,
        useNativeDriver: true
      }),
      Animated.spring(this.translateContent, {
        friction: 6,
        toValue: 0,
        delay: 800,
        useNativeDriver: true
      }),
      Animated.spring(this.translateMap, {
        toValue: -150,
        delay: 800,
        useNativeDriver: true
      })
    ]).start(() => this.setState({isReady: true}));
  };


  closeView = () => {
    return this.props.closeModal();
  }

  close = () => {
    return this.interactable.snapTo({ index: 0 });
  };

  open = () => {
    return this.interactable.snapTo({ index: 1 });
  }

  onPressAnnotation = (coordinate, index) => {
    this.scrollTo(index);
    return this.map.flyTo(coordinate, 800);
  }

  annotation = (data, index) => {
    const Pin = PINS.boite;
    const coordinate = this.getLatLong(data);

    return (
      <MapboxGL.PointAnnotation
        key={index.toString()}
        id={index.toString()}
        onSelected={() => this.onPressAnnotation(coordinate, index)}
        coordinate={coordinate}
      >
        <Pin />
      </MapboxGL.PointAnnotation>
    );
  };

  render() {
    const { points, isOpen } = this.props;
    const { index, isReady, moving, searching } = this.state;
    const renderedPoints = points;

    return (
      <View style={style.container}>
        <RenderIf condition={isOpen}>
          <Animated.View
            onLayout={this.onMapLayout}
            style={[{opacity: this.mapOpacity}, this.transformMap]}
          >
            <MapboxGL.MapView
              onRegionWillChange={this.onWillChange}
              onRegionDidChange={this.onDidChange}
              logoEnabled={false}
              styleURL="mapbox://styles/malinverni/cjbf41fkman7q2spxwv9isah3"
              centerCoordinate={[2.3469418, 48.8673289]}
              zoomLevel={14}
              ref={map => (this.map = map)}
              style={style.map}
            >
              {points.map(this.annotation)}
            </MapboxGL.MapView>
            <View pointerEvents="box-none" style={style.distanceOverlay}>
              <View style={style.dotContainer}>
                {moving && <View style={style.singleDot} />}

                {searching && [
                  <View style={style.threeDot}>
                    <View style={style.singleSmallDot} />
                    <View style={style.singleSmallDot} />
                    <View style={style.singleSmallDot} />
                  </View>
                ]}
              </View>
              <View style={style.distanceContainer}>
                <Text style={style.distanceText}>
                  {this.getIndicatorContent()}
                </Text>
              </View>
            </View>
            <Animated.View
              pointerEvents="none"
              style={[style.mapOverlay, { opacity: this.overlayOpacity }]}
            />
          </Animated.View>
          <TouchableOpacity
            hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
            onPress={this.closeView}
            style={style.close}
          >
            <Cross ratio={0.6}/>
          </TouchableOpacity>
        </RenderIf>
        <DelayRenderer delay={1000}>
          <Animated.View
            pointerEvents="box-none"
            style={[style.over, this.transform]}
          >
            <Interactable.View
              verticalOnly={true}
              animatedNativeDriver={true}
              animatedValueY={this.deltaY}
              ref={r => (this.interactable = r)}
              snapPoints={[{ y: 0 }, { y: -HEIGHT_PHONE }]}
              boundaries={{ top: -HEIGHT_PHONE, bottom: 0, bounce: 0 }}
              style={style.interactable}
            >
              <View style={style.pager}>
                <Pager
                  disabled={!isOpen}
                  setOffset={o => (this.offset = o)}
                  setScrollTo={s => (this.scrollTo = s)}
                  setIsDragging={s => this.isSliderDragging = s}
                  onResponderRelease={this.onSliderRelease}
                  onScrollEnd={this.onScrollEnd}

                  indicatorPosition="none"
                >
                  {renderedPoints.map((x, i) => (
                    <SliderItem
                      key={i}
                      data={x}
                      open={this.open}
                      deltaY={this.deltaY}
                    />
                  ))}
                </Pager>
              </View>
              <Ovni />
            </Interactable.View>

            <Animated.View
              style={[
                style.squares,
                { transform: [{ translateY: this.deltaY }] }
              ]}
            >
              <DelayRenderer delay={1000}>
                {points[index] && (
                  <Content
                    data={points[index]}
                    deltaY={this.deltaY}
                    close={this.close}
                  />
                )}
              </DelayRenderer>
            </Animated.View>
          </Animated.View>
        </DelayRenderer>
      </View>
    );
  }
}