import React, { Component } from 'react';
import {
  View,
  TouchableOpacity,
  Platform,
  Animated,
  PanResponder
} from 'react-native';

import { vw, GetDirections, Icon, Label, LocalNumber, AnimateNext, PopulateWithExactDistance } from '../../global';
import Carousel from 'react-native-snap-carousel';
import ApiInterface from '../../config/api-interface'
import moment from 'moment'


export default class DestinationPanel extends Component {
  constructor(props) {
    super(props);
    this.position = new Animated.ValueXY();
  }
  state = {
    isHidden: false,
    closestOffices: []
  }

  calculate = async () => {
    const { userCoords, destination } = this.props;
    if (!destination.bookedOfficeId) {
      const closestOffices = await ApiInterface.getNearestLocations({ latitude: userCoords.latitude, longitude: userCoords.longitude, count: 2 });
      await PopulateWithExactDistance(userCoords, closestOffices, 'CLOSEST OFFICES DISTANCE CALCULATE');
      this.setState({ closestOffices });
    } else {
      this.setState({ closestOffices: [] })
    }
  }

  componentWillMount() {
    this.PanResponder = PanResponder.create({
      onStartShouldSetPanResponder: (e, gestureState) => true,
      onPanResponderMove: (evt, gestureState) => {
        if (gestureState.dx < 15)
          this.position.setValue({ x: gestureState.dx });
      },
      onPanResponderRelease: (evt, gestureState) => {
        if (-(gestureState.dx + (gestureState.vx * 50)) > 90) {
          Animated.spring(this.position, {
            toValue: ({ x: -vw, y: 65 }),
            duration: 50
          }).start();
          setTimeout(() => {
            this.setState({ isHidden: true });
          }, 0);
        } else {
          Animated.spring(this.position, {
            toValue: ({ x: 0, y: 0 })
          }).start();
        }
      }
    })
  }

  onLocationSelect = (location) => {
    this.setState({ selectedLocation: location });
    this.props.onLocationSelect(location.location);
  }
  onDestinationClick = () => {
    this.setState({ selectedLocation: undefined });
    this.props.onDestinationClick(this.props.destination);
  }

  open = () => {
    this.setState({ isHidden: false });
    Animated.spring(this.position, {
      toValue: ({ x: 0, y: 0 })
    }).start();
  }

  render() {
    const { destination } = this.props;
    const { closestOffices } = this.state;

    if (!destination || !destination.duration) {
      return <View />;
    }
    const duration = destination.duration.value / 60;
    const durationHours = Math.floor(duration / 60);
    const durationMinutes = Math.floor(duration % 60);

    const delay = destination.delay;
    const delayHours = Math.floor(delay / 60);
    const delayMinutes = Math.floor(delay % 60);
    return (
      <View style={{ top: -115 }}>
        {this.state.isHidden &&
          <TouchableOpacity onPress={this.open} style={{ position: 'absolute', top: Platform.OS == 'ios' ? 72 : 75, left: 7, backgroundColor: 'rgba(26, 35, 47, 0.7)', padding: 11, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 14, paddingRight: 12, borderRadius: 4 }}>
            <Icon color="white" name="arrow" size={15} />
          </TouchableOpacity>
        }
        <Animated.View style={[{ position: 'absolute', zIndex: 49, paddingTop: 15, paddingLeft: 0, paddingRight: 35 }, this.position.getLayout()]} {...this.PanResponder.panHandlers}>
          <View style={{ backgroundColor: 'rgba(26, 35, 47, 0.8)', marginTop: 60, marginLeft: 7, paddingVertical: 15, borderRadius: 3, paddingRight: 15 }}>
            <View style={{ flexDirection: 'row', marginBottom: closestOffices.length && !destination.bookedOfficeId ? -10 : -15, paddingBottom: 5, borderBottomWidth: closestOffices.length && !destination.bookedOfficeId ? 0 : 0, borderBottomColor: "#f0b323" }}>
              <TouchableOpacity onPress={() => GetDirections({ destination, params: [{ key: "dirflg", value: "d" }] })} style={{ width: 50, height: 50, justifyContent: 'center', alignItems: 'center', paddingBottom: 5 }}>
                <Icon name="navigate" size={20} color="#f0b323" />
              </TouchableOpacity>
              <TouchableOpacity onPress={this.onDestinationClick}>
                <View style={{ maxWidth: vw - 130, paddingRight: 15 }}>
                  <Label numberOfLines={1}>
                    {destination.name}
                  </Label>
                  <Label style={{ marginTop: Platform.OS == 'ios' ? 10 : 2, lineHeight: 18 }}>
                    {!!durationHours && <Label weight={500}>{durationHours}</Label>}
                    {!!durationHours && 'h'}
                    <Label weight={500}>{durationMinutes}</Label>
                    {!!durationMinutes && 'min'}{' drive'}
                    {(!!delayHours || !!delayMinutes) &&
                      <Label>
                        {' + '}
                        {!!delayHours && <Label weight={500}>{delayHours}</Label>}
                        {!!delayHours && 'h'}
                        <Label weight={500}>{delayMinutes}</Label>
                        {!!delayMinutes && 'min'}{' delay'}
                      </Label>
                    }
                  </Label>
                </View>
              </TouchableOpacity>
            </View>
            <View style={{ position: 'absolute', justifyContent: 'center', paddingHorizontal: 10, paddingLeft: 80, right: 0, height: !destination.bookedOfficeId ? '130%' : '170%', paddingTop: 5, zIndex: 100 }}>
              <View>
                <Icon name="grid" color="#7c878ebb" size={8} />
                <Icon name="grid" style={{ marginTop: 1.2 }} color="#7c878ebb" size={8} />
              </View>
            </View>
            {this.state.closestOffices.map(x =>
              (
                <TouchableOpacity onPress={() => this.onLocationSelect(x)} style={{ flexDirection: 'row', alignItems: 'center', flex: 1, paddingTop: 5 }} key={x.id}>
                  <View style={{ width: 50, height: '100%', alignItems: 'center', justifyContent: 'center' }} >
                    <Icon name="menu-booking" size={20} color="#f0b323" />
                  </View>
                  <View pointerEvents="none">
                    <Label weight={(this.state.selectedLocation || {}).id == x.id ? 500 : 100} style={{ width: 0.6 * vw }}>
                      {x.name} ({LocalNumber(x.distance)} km)
                      </Label>
                  </View>
                </TouchableOpacity>
              ))}
          </View>
        </Animated.View>
      </View>

    );
  }
}