import React from 'react';
import * as PropTypes from 'prop-types';
import { ViewPropTypes, requireNativeComponent, ImageSourcePropType, Image } from 'react-native';
import type { LatLng, LatLngPoint } from '../types';
import Component from '../map-view/component';

import { mapEventsPropType, LatLngPropType } from '../prop-types';

export interface DrivePathProp {
    startPoint: LatLng;
    endPoint: LatLng;
    pathWidth?: number;
    pathColor?: string;
    nodeVisible?: boolean;
    startMarkerTitle?: string;
    endMarkerTitle?: string;
    startMarkerIcon?: ImageSourcePropType;
    endMarkerIcon?: ImageSourcePropType;
    nodeMarkerIcon?: ImageSourcePropType;
    throughMarkerIcon?: ImageSourcePropType;
    wayPoints?: LatLngPoint[];
    avoidRegion?: LatLngPoint[][];
    avoidRoad?: string;
    throughPoints?: LatLngPoint[];
    throughMarkerVisible?: boolean;
    realTimeTraffic?: boolean;
    searchMode?: number;
    normalPathColor?: string;
    slowlyPathColor?: string;
    blockedPathColor?: string;
    severeBlockedPathColor?: string;
    onSearchStart?: () => void;
    onSearchComplete?: (event: { code: number }) => void;
}

const events = ['onSearchStart', 'onSearchComplete'];

export class DrivePath extends Component<DrivePathProp> {
    static propTypes = {
        ...ViewPropTypes,
        ...mapEventsPropType(events),
        startPoint: LatLngPropType.isRequired,
        endPoint: LatLngPropType.isRequired,
        pathWidth: PropTypes.number,
        pathColor: PropTypes.string,
        nodeVisible: PropTypes.bool,
        startMarkerTitle: PropTypes.string,
        endMarkerTitle: PropTypes.string,
        startMarkerIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
        endMarkerIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
        nodeMarkerIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
        throughMarkerIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
        wayPoints: PropTypes.arrayOf(LatLngPropType),
        avoidRegion: PropTypes.arrayOf(PropTypes.arrayOf(LatLngPropType)),
        avoidRoad: PropTypes.string,
        throughPoints: PropTypes.arrayOf(LatLngPropType),
        throughMarkerVisible: PropTypes.bool,
        realTimeTraffic: PropTypes.bool,
        searchMode: PropTypes.number,
        normalPathColor: PropTypes.string,
        slowlyPathColor: PropTypes.string,
        blockedPathColor: PropTypes.string,
        severeBlockedPathColor: PropTypes.string,
        throughPointIcon: PropTypes.string,
    };

    nativeComponent = 'DrivePath';

    render() {
        const props: { [key: string]: any } = {
            ...this.props,
            ...this.handlers(events),
        };
        for (let k in props) {
            if (k.indexOf('Icon') > -1) {
                props[k] = Image.resolveAssetSource(props[k]);
            }
        }
        return <ADrivePath {...props} />;
    }
}

// @ts-ignore
const ADrivePath = requireNativeComponent('DrivePath', DrivePath);