import React, {useEffect, useState} from 'react';
import Directions from "./Directions";
import {
    APIProvider,
    Map,  
} from '@vis.gl/react-google-maps';
import orderTruckIcon from "../../assets/img/order_truck_icon.svg";
import callIcon from "../../assets/img/icon_Call.png";
import messageIcon from "../../assets/img/icon_Message.png";
import faceIcon from "../../assets/img/icon_UI_Face.png";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  Divider,
  Grid,
  IconButton,
  Typography,
} from "@mui/material";
import "./LocationTracking.scss";
import Timeline from "@mui/lab/Timeline";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineConnector from "@mui/lab/TimelineConnector";
import TimelineContent from "@mui/lab/TimelineContent";
import TimelineDot from "@mui/lab/TimelineDot";
import TimelineItem, { timelineItemClasses } from "@mui/lab/TimelineItem";
import CloseIcon from "@mui/icons-material/Close";
import {
    MAP_SETTINGS,
    REACT_APP_GOOGLE_MAP_API_KEY,
  } from "../../common/constants";
import { useAppData } from "../../context/AppDataContext";
import { fetchShipmentDetails } from "../../common/apiCalls";

const LocationTracker = ({ show, onHide, indexTracker}) => {

    const [start, setStart] = useState('');
    const [end, setEnd] = useState('');
    const [markerLat, setMarkerLat] = useState('');
    const [markerLng, setMarkerLng] = useState('');
    const [shipmentDetails, setShipmentDetails] = useState([]); 
    const [etaTime, setEtaTime] = useState(null);
    const [transitAddress, setTransitAddress] = useState(null);
    const [shipmentIndex, setShipmentIndex] = useState(0);
    const [destinationTime, setDestinationTime] = useState('');
    const time = new Date().getTime();
    const  appData  = useAppData();    

     // Date Functionality Starts
    const formatDate = (dateData) => {
        const dateForm = new Date(dateData);
        const dd = dateForm.getDate();
        const mm = dateForm.getMonth() + 1;
        const yyyy = dateForm.getFullYear();
        let hrs = dateForm.getHours();
        const min = dateForm.getMinutes();
        const sec = dateForm.getSeconds();
        const ampm = hrs > 12 ? "PM" : "AM";
        hrs = hrs > 12 ? hrs - 12 : hrs;
        const formatedDate = dd + "/" + mm + "/" + yyyy + " " + hrs + ":" + min + ":" + sec + " " + ampm;
        return formatedDate;
    };
    console.log("appData", appData);
    console.log("indexTracker", indexTracker);

    const handleEta = (eta) => {       
            setEtaTime(eta);
            
    };

    const handleAddress = (address) => {
        setTransitAddress(address);
    };

    const handleDestinationTime = (time) => {
        setDestinationTime(time)
    };

   
    const refreshData = async () => {
        try {
            const deviceShipmentResult = await fetchShipmentDetails(); 
            console.log("deviceShipmentResult", deviceShipmentResult);
            appData.setShipmentDataResponse(deviceShipmentResult);
          
            // setDeviceStatusResponse(deviceStatusResult);
            // setDeviceStatusResponse((deviceStatusResult) => [deviceStatusResult]);
          } catch (error) {
            console.error("Error fetching data:", error);
        }
    }

    useEffect(() => {        
        setShipmentDetails(appData.shipmentDataResponse);
        // filterSerialNumber();
        setLocationDetails();        
    },[shipmentDetails]);

    const setLocationDetails = () => {
        setStart(shipmentDetails[shipmentIndex]?.origin?.address);
        setEnd(shipmentDetails[shipmentIndex]?.destination?.address); 
        setMarkerLat(shipmentDetails[shipmentIndex]?.additionalInformation?.currentLocation?.latitude
            );   
        setMarkerLng(shipmentDetails[shipmentIndex]?.additionalInformation?.currentLocation?.longitude

            );     
    };
    
    const API_KEY = REACT_APP_GOOGLE_MAP_API_KEY;

    return (
        <>
            <Dialog open={show} onClose={onHide} fullWidth="lg" maxWidth="lg">        
                <DialogTitle
                    sx={{ m: 0, p: 2, fontWeight: "bold" }}
                    id="customized-dialog-title"
                    >
                    Live Shipment Tracking
                </DialogTitle>
                <IconButton
                    aria-label="close"
                    onClick={onHide}
                    sx={{
                        position: "absolute",
                        right: 8,
                        top: 8,
                        color: (theme) => theme.palette.grey[500],
                    }}
                >
                    <CloseIcon />
                </IconButton>
                <DialogContent dividers>
                    <div
                        style={{
                        position: "relative",
                        //zIndex: 0,
                        width: "100%", // or you can use width: '100vw'
                         height: "100%", // or you can use height: '100vh'
                        }}
                        >
                        <div
                            style={{
                            zIndex: 1,
                            position: "absolute",
                            top: 10,
                            left: 11,
                            backgroundColor: "white", // you can use any color value
                            width: "25%", // or you can use width: any_number
                            height: "auto", // or you can use height: any_number
                            background: "#FFFFFF",
                            border: "0.5px solid #CDCDCD",
                            }}
                            >
                            <div style={{ margin: "10px", marginLeft: "10px" }}>
                                <img src={orderTruckIcon} style={{ marginRight: "10px" }} />
                                <span>
                                    <b>Track My Order</b>
                                </span>
                                

                                <Grid container sx={{ mt: 2 }}>
                                    <Grid item xs={5}>
                                        <Typography className="subText"> Shipment ID</Typography>
                                        <Typography className="idNumber">{shipmentDetails[shipmentIndex]?.destination?.shipmentTrackers[0]?.serialNumber}</Typography>
                                    </Grid>
                                    <Grid item xs={3}></Grid>

                                    {destinationTime == '' ?  <Grid item xs={4} className="inTransistText">
                                        In transist
                                    </Grid> : <Grid item xs={4} className="inShippedText">
                                        Shipped <img src="/Icon_Success.svg" style={{paddingLeft: '10px'}} />
                                    </Grid>}
                                   
                                    <Grid item xs={3}></Grid>
                                    
                                </Grid>
                                <Grid container sx={{ mt: 1 }}>
                                    <Grid item xs={9}>
                                        <Typography className="subText">
                                            {" "}
                                            Estimated Time of Arrival:
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={3}>
                                        {" "}
                                        <Typography className="subText" sx={{ textAlign: "right" }}>
                                            {" "}
                                        
                                            {etaTime === '1 min'? '--:--': etaTime}
                                        </Typography>
                                    </Grid>
                                </Grid>

                                <hr></hr>
                                {/* <div class="circle"></div>
                                <div class="dotted-line"></div> */}
                                <Timeline
                                    sx={{
                                    [`& .${timelineItemClasses.root}:before`]: {
                                    flex: 0,
                                    padding: 0,
                                    },
                                    backgroundColor: "white",
                                    padding: 0,
                                    border: "none",
                                    }}
                                    >
                                    <TimelineItem>
                                        <TimelineSeparator>
                                            <TimelineDot variant="outlined" />
                                            <TimelineConnector />
                                        </TimelineSeparator>
                                        <TimelineContent>                                            
                                            <Typography className="time">
                                                {formatDate(shipmentDetails[shipmentIndex]?.shipFromDate)}
                                            </Typography>
                                            <Typography className="orderStatusText">
                                               <b> Package has been picked up </b>
                                            </Typography>
                                            <Typography className="orderAddress">
                                               {start}
                                            </Typography>
                                        </TimelineContent>
                                    </TimelineItem>
                                    <TimelineItem>
                                        <TimelineSeparator>
                                            <TimelineDot variant="outlined" />
                                            <TimelineConnector />
                                        </TimelineSeparator>
                                        <TimelineContent>
                                            
                                            <Typography className="time">
                                            {formatDate(shipmentDetails[shipmentIndex]?.destination?.shipmentTrackers[0]?.lastConnectedOn)}
                                            </Typography>
                                            <Typography className="orderStatusText">
                                                <b>Package in Transit</b>
                                                
                                            </Typography>
                                            <Typography className="orderAddress">
                                                {/* {shipmentDetails[0]?.shipmentProgressStatus} */}{transitAddress}
                                            </Typography>
                                        </TimelineContent>
                                    </TimelineItem>
                                    <TimelineItem>
                                        <TimelineSeparator>
                                        <TimelineDot variant="outlined" color="primary" />
                                        </TimelineSeparator>
                                        <TimelineContent>                                            
                                            <Typography className="time">
                                            {destinationTime === ''? 'Package is in Transit to its Final Destination' : formatDate(destinationTime)}
                                            
                                            </Typography>
                                            <Typography className="orderStatusText">
                                            {destinationTime !== '' ? <b>Package has been delivered to its Final Destination</b>: ''}
                                            </Typography>
                                            <Typography className="orderAddress">
                                                {end}
                                            </Typography>
                                        </TimelineContent>
                                    </TimelineItem>
                                </Timeline>
                                <Grid container sx={{ mt: 3 }}>
                                    <Grid item xs={2}>
                                        <img src={faceIcon} />
                                    </Grid>
                                    <Grid item xs={7} sx={{ px: 1 }}>
                                        <Typography className="deliveryManName">Mark</Typography>
                                        <Typography className="deliveryManJob">
                                            NaviCare Logistics
                                        </Typography>
                                    </Grid>
                                    <Grid item xs={1}>
                                        <img src={callIcon} />
                                    </Grid>
                                    <Grid item xs={1}></Grid>
                                    <Grid item xs={1}>
                                        <img src={messageIcon} />
                                    </Grid>
                                </Grid>
                                <Typography className="mt-1 actionText">
                                    Use App or your mobile to make calls
                                </Typography>
                            </div>
                        </div>
                        <APIProvider apiKey={API_KEY}>
                            <div  style={{width: '100vw', height: '100vh'}}>
                                <Map                   
                                    defaultZoom={3}
                                    defaultCenter={{lat: 12.9149, lng: 77.5206}}
                                    gestureHandling={'greedy'}
                                    disableDefaultUI={true}
                                    >
                                    <Directions
                                        origin={start}
                                        destination={end}
                                        markerLat={markerLat}
                                        markerLng={markerLng}
                                        handleEta={handleEta}
                                        handleAddress={handleAddress}
                                        handleDestinationTime={handleDestinationTime}
                                        refreshData={refreshData}
                                    /> 
                                </Map>
                            </div>
                
                        </APIProvider>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}

export default LocationTracker;