#tripDetails

import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
import MapView, {Marker} from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import firestore from '@react-native-firebase/firestore';
import {getDistance, getPreciseDistance} from 'geolib';

const screen = Dimensions.get('window');
const ASPECT_RATIO = screen.width / screen.height;
const LATITUDE_DELTA = 0.1;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const TripDetails = ({route, navigation}) => {
  const GOOGLE_MAPS_APIKEY = 'AIzaSyC2BsJAYu3qHlMTEhkMPUnbFQpZ_QFbT0k';

  const tripDetails = route.params;
  console.log('tripDetails', tripDetails);
  const [tripDetail, setTripDetail] = useState();
  const [driverDetail, setDriverDetail] = useState();
  const [vehicleDetail, setVehicleDetail] = useState();
  const [driverName, setdriverName] = useState('');
  const [totalDistance, settotalDistance] = useState('');
  const LiveTrack = 'Live Tracking';

  const moment = require('moment');
  const getVehicleDetails = async () => {
    await firestore()
      .collection('assets')
      .where('driverId', '==', tripDetails.tripId.userId)
      .get()
      .then(snap => {
        let result = [];
        if (snap) {
          snap.forEach(documentSnapshot => {
            result.push({
              ...documentSnapshot.data(),
            });
          });
          console.log('result.....', result);
          setVehicleDetail(result);
        } else {
          console.log(' using size not found');
        }
      })
      .catch(e => {
        console.log('error from firebase', e);
      });
  };

  const getUserDetails = async () => {
    await firestore()
      .collection('users')
      .doc(tripDetails.tripId.userId)
      .get()
      .then(documentSnapshot => {
        if (documentSnapshot.exists) {
          console.log('use Info from db', documentSnapshot.data());
          setDriverDetail(documentSnapshot.data());
        }
      });
  };

  const calculatePreciseDistance = () => {
    var pdis = getPreciseDistance(
      {
        latitude: tripDetails.tripId.fromCoordinates.latitude,
        longitude: tripDetails.tripId.fromCoordinates.longitude,
      },
      {
        latitude: tripDetails.tripId.toCoordinates.latitude,
        longitude: tripDetails.tripId.toCoordinates.longitude,
      },
    );
    var totaldstn = pdis / 1000;
    settotalDistance(totaldstn);
  };

  React.useEffect(() => {
    if (tripDetails) {
      getVehicleDetails();
      getUserDetails();
      // calculateDistance();
      calculatePreciseDistance();
    }
  }, [tripDetails]);

  React.useEffect(() => {
    if (driverDetail) {
      setdriverName(driverDetail.userName);
    }
  }, [driverDetail]);

  const origin = {
    latitude: tripDetails.tripId.fromCoordinates.latitude,
    longitude: tripDetails.tripId.fromCoordinates.longitude,
  };

  const destination = {
    latitude: tripDetails.tripId.toCoordinates.latitude,
    longitude: tripDetails.tripId.toCoordinates.longitude,
  };

  useEffect(() => {
    if (tripDetails) setTripDetail(tripDetails.tripId);
  }, [tripDetails]);

  // console.log('totalDistance', +totalDistance.toFixed(2));
  // console.log('started At ', tripDetails.tripId.startedAt);
  // console.log('endedAt At ', tripDetails.tripId.endedAt);

  const startedAt = moment(tripDetails.tripId.startedAt).format(
    'MMMM Do YYYY, h:mm:ss a',
  );

  const endedAt = moment(tripDetails.tripId.endedAt).format(
    'MMMM Do YYYY, h:mm:ss a',
  );
  var ms = moment(endedAt, 'MMMM Do YYYY HH:mm:ss').diff(
    moment(startedAt, 'MMMM Do YYYY HH:mm:ss'),
  );
  var d = moment.duration(ms);
  var s = Math.floor(d.asHours()) + moment.utc(ms).format(':mm:ss');

  // console.log('startedAt', startedAt);
  // console.log('endedAt', endedAt);
  // console.log('s', s);

  // const diffInMs = Math.abs(
  //   tripDetails.tripId.endedAt - tripDetails.tripId.startedAt,
  // );

  // const difference = diffInMs / (1000 * 60 * 60);
  // const differenceMins = (diffInMs / (1000 * 60)) % 60;

  // const DriverName = driverDetail.userName;
  // console.log('difference', difference);
  // console.log('differenceMins', differenceMins);

  return (
    <ScrollView>
      <View>
        <View>
          <MapView
            style={{
              height: 250,
              width: '100%',
            }}
            initialRegion={{
              latitude: tripDetails.tripId.fromCoordinates.latitude,
              longitude: tripDetails.tripId.fromCoordinates.longitude,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }}>
            <Marker pinColor="blue" coordinate={origin} />
            <Marker coordinate={destination} />
            <MapViewDirections
              origin={origin}
              destination={destination}
              apikey={GOOGLE_MAPS_APIKEY}
              strokeWidth={3}
              strokeColor="blue"
            />
          </MapView>
        </View>
        <View
          style={{
            margin: 10,
          }}>
          <Text
            style={{
              margin: 5,
              marginStart: 10,
              marginTop: 10,
              fontWeight: 'bold',
            }}>
            TRIP DETAILS :
          </Text>
          <View style={{flexDirection: 'row', margin: 10}}>
            <View style={{margin: 5, flex: 1.5}}>
              <Text style={{fontWeight: 'bold'}}>Created Time :</Text>
              <Text>
                {moment(tripDetails.tripId.createdAt).format(
                  'MMMM Do YYYY, h:mm a',
                )}
              </Text>
            </View>

            <Text
              style={{
                color: '#008B8B',
                fontWeight: 'bold',
                fontSize: 15,
              }}>
              {tripDetails.tripId.status}
            </Text>
          </View>

          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginTop: 5,
              paddingRight: 30,
            }}>
            <Icon name="dot-single" style={{color: 'blue'}} size={35} />
            <Text>{tripDetails.tripId.fromLocation}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginTop: 2,
              paddingRight: 30,
            }}>
            <Icon name="dot-single" style={{color: 'green'}} size={35} />
            <Text>{tripDetails.tripId.toLocation}</Text>
          </View>

          <View style={{flexDirection: 'row', marginStart: 8, marginTop: 8}}>
            <View>
              <Text style={{fontWeight: 'bold'}}>Started Time :</Text>
              <Text>
                {moment(tripDetails.tripId.createdAt).format(
                  'MMMM Do YYYY, h:mm a',
                )}
              </Text>
            </View>
            <View style={{marginLeft: 20}}>
              <Text style={{fontWeight: 'bold'}}>Ended Time :</Text>
              <Text>
                {moment(tripDetails.tripId.createdAt).format(
                  'MMMM Do YYYY, h:mm a',
                )}
              </Text>
            </View>
          </View>

          <View
            style={{
              flexDirection: 'row',
              margin: 10,
              marginTop: 15,
            }}>
            <Text style={{fontWeight: 'bold', flex: 1}}>Time Travelled </Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 1}}>{s} HH:MM:SS</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
            }}>
            <Text style={{fontWeight: 'bold', flex: 1}}>Total Distance </Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 1}}>{totalDistance}Kms</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
            }}>
            <Text style={{fontWeight: 'bold', flex: 1}}>Project Name</Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 1}}>{tripDetails.tripId.projectName}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
            }}>
            <Text style={{fontWeight: 'bold', flex: 1}}>Route Name</Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 1}}>{tripDetails.tripId.routeName}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
            }}>
            <Text style={{fontWeight: 'bold', flex: 1}}>Tons</Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 1}}>{tripDetails.tripId.tons}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
            }}>
            <Text style={{fontWeight: 'bold', flex: 1}}>Fuel Level</Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 1}}>{tripDetails.tripId.fuelLevel}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
            }}>
            <Text style={{fontWeight: 'bold', flex: 1}}>Mileage</Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 1}}>{tripDetails.tripId.mileage}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              margin: 10,
            }}>
            <Text style={{fontWeight: 'bold', flex: 0.9}}>Commodity Name</Text>
            <Text style={{flex: 0.2}}>:</Text>
            <Text style={{flex: 0.9}}>{tripDetails.tripId.commodity}</Text>
          </View>

          <Text style={{fontWeight: 'bold', margin: 10}}>Driver Details :</Text>
          <View style={{marginStart: 30}}>
            <Text>{driverName}</Text>
            <Text>N/A</Text>
            {vehicleDetail &&
              vehicleDetail.map((item, key) => (
                <View style={{flexDirection: 'row'}}>
                  <Text>{item.assetNumber}.</Text>
                  <Text>({item.vehicleMake})</Text> 
                </View>
              ))}
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

export default TripDetails;