import React from "react";
import util from "../lib/util";
import ReactDOMServer from 'react-dom/server';
import { GreenFlagSvg , RedFlagSvg , YellowDotSvg , TruckSvg , BlueDotSvg} from "../assets/svg/TrackingSvg";


// const createReactIcon = (reactComponent ,iconSize, className) => {
//     const iconUrl = `data:image/svg+xml,${encodeURIComponent(ReactDOMServer.renderToString(React.createElement(reactComponent)))}`;
//     return L.icon({
//         iconUrl,
//         iconSize,
//         className
//     });
// };

 const TrackingMapUi = ( props ) => {
    const { track_locations=[], source_location='', destination_in='', destination_location='' } = props.locationData
    
    const locations = [...track_locations].sort((a, b) => {
        const timeA = new Date(a.location_at).getTime();
        const timeB = new Date(b.location_at).getTime();
        return timeA - timeB;
      });

    // const currentLocationIcon = createReactIcon(destination_in ? BlueDotSvg : TruckSvg, destination_in ? [12, 12] : [72, 72]);
    // const incorrectLocationIcon = createReactIcon(YellowDotSvg, [12, 12]); 
    // const sourceLocationIcon = createReactIcon( GreenFlagSvg, [22, 22]);
    // const destinationLocationIcon = createReactIcon(RedFlagSvg, [22, 22]); 
    // const correctLocationIcon = createReactIcon(BlueDotSvg, [12, 12] );

    const width = window.screen.width
    const height = window.screen.height

    const map_height = (width >= 600 && height >= 480) ? '700px' : '500px'

    const lineLocations = [
        ...(source_location && [{ location: source_location }]),
        ...locations
    ]
    const polylinePositions = lineLocations
        .filter((item ) => !item.is_incorrect_location)
        .map((data) => {
            const location = util.getLatLng(data?.location)
            return location
        })
    
    const source_lat_lang = source_location ? util.getLatLng(source_location) : ''
    const destination_lat_lang = destination_location ? util.getLatLng(destination_location) : ''

    const { location = null  } = locations[locations.length - 1] || {}
    const centerLocation = location !== null ? util.getLatLng(location) : source_lat_lang 

    if(destination_in && Array.isArray(destination_lat_lang)){
        polylinePositions.push(destination_lat_lang)
    }
    
    return(
        <div>
            {typeof window !== 'undefined' ? (
                <MapContainer center={centerLocation} zoom={9} style={{ height: map_height}} className="fr-w-full fr-z-0">
                    <TileLayer url='https://map.osrm.fr8.in/tile/{z}/{x}/{y}.png' />
                    {source_lat_lang && <Marker position={source_lat_lang} icon={sourceLocationIcon} ></Marker>}

                    {locations.map((locationData, index) => {
                        const isCorrectLocation = locationData?.is_incorrect_location;
                        const location = util.getLatLng(locationData?.location)
                        const isCurrentLocation = index === locations.length - 1;
                        const locationIcon = isCurrentLocation ? currentLocationIcon : isCorrectLocation ? incorrectLocationIcon : correctLocationIcon;
                        
                        return (
                            <Marker key={index} position={location} icon={locationIcon}>
                                <Popup>
                                    <div>
                                        <p>Address: {locationData?.address}</p>
                                        <p>Time: {util.formatDate(locationData?.location_at, 'DD-MMM HH:mm')}</p>
                                        <p>Location: {locationData?.location}</p>
                                    </div>
                                </Popup>
                            </Marker>
                        );
                    })}

                    {destination_lat_lang && <Marker position={destination_lat_lang} icon={destinationLocationIcon}></Marker>}
                    {locations.length > 1 && <Polyline positions={polylinePositions} className="fr-border-sky-blue"/>}
                </MapContainer>
            ) : (
                <></>
            )}
        </div>

    )
}