import React, { PureComponent } from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { Polyline, Polygon, Marker, Region } from 'react-native-maps';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Link, Portal, Field } from '../Api/types';
import { connect } from 'react-redux';
import { COLORS, COLORS_LVL, DEFAULT_ZOOM_TO_LEVEL, DEFAULT_ZOOM_TO_LINK_LENGTH } from '../constants';
import { calcCrow } from '../helper';
const PORTALS = {
    "N1": require('../../assets/N.png'),
    "R1": require('../../assets/R1.png'),
    "R2": require('../../assets/R2.png'),
    "R3": require('../../assets/R3.png'),
    "R4": require('../../assets/R4.png'),
    "R5": require('../../assets/R5.png'),
    "R6": require('../../assets/R6.png'),
    "R7": require('../../assets/R7.png'),
    "R8": require('../../assets/R8.png'),
    "E1": require('../../assets/E1.png'),
    "E2": require('../../assets/E2.png'),
    "E3": require('../../assets/E3.png'),
    "E4": require('../../assets/E4.png'),
    "E5": require('../../assets/E5.png'),
    "E6": require('../../assets/E6.png'),
    "E7": require('../../assets/E7.png'),
    "E8": require('../../assets/E8.png'),
}

const fillPortalColor = { "R": "rgba(2, 140, 227, 0.5)", "E": "rgba(38, 205, 30, 0.5)", "N": "rgba(139, 0, 255, 0.5)" }
// const fillPortalColor = { "R": COLORS[1], "E": COLORS[2], "N": COLORS[0] }
const fractColor = { "R": "#028ce3", "E": "#26cd1e", "N": "#8b00ff" }
// const fractColor = { "R": COLORS[1], "E": COLORS[2], "N": COLORS[0] }
const fieldColor = { "R": "rgba(2, 140, 227, 0.1)", "E": "rgba(38, 205, 30, 0.1)", "N": "rgba(139, 0, 255, 0.1)" }

type Props = {
    portals: Portal[]
    links: Link[]
    fields: Field[]
    region: Region
    onPortalClick: Function
    zoom: Number
}

class MapObjects extends PureComponent<Props> {
    render() {
        const portals = this.props.portals
        const fields = this.props.fields
        const links = this.props.links
        const renderPortal = this.props.renderPortal.map(guid => guid && this.drawPortal(guid, portals[guid], this.props.onPortalClick))
        const renderLink = this.props.renderLink.map(guid => this.drawLink(guid, links[guid]))
        const renderField = this.props.renderField.map(guid => this.drawField(guid, fields[guid]))
        return [...renderField, ...renderLink, ...renderPortal]
    }
    drawPortal = (guid: string, entity: Portal, onPortalClick: Function) => {
        const selected = this.props.selectedPortal && this.props.selectedPortal.guid == guid
        return (<Marker
            key={guid}
            coordinate={entity.coords}
            onPress={() => onPortalClick(guid, entity.coords)}
            style={[selected ? { borderColor: 'red', borderWidth: 4, borderRadius: 13 } : null, { height: 26, width: 26, flex: 1, justifyContent: "center", alignItems: 'center' }]}
            zIndex={selected ? 10 : entity.level}
            anchor={{ x: 0.5, y: 0.5 }}
        >
            <Image
                source={PORTALS[entity.fraction + entity.level]}
                style={{ height: 22, width: 22 }}
            />
        </Marker>);
    }
    drawField = (guid: string, entity: Field) => {
        return <Polygon
            key={guid}
            coordinates={entity.coords}
            fillColor={fieldColor[entity.fraction]}
            strokeColor={fieldColor[entity.fraction]}
            strokeWidth={StyleSheet.hairlineWidth}
        />
    }
    drawLink = (guid: string, entity: Link) => {
        return <Polyline
            key={guid}
            coordinates={entity.coords}
            strokeColor={fractColor[entity.fraction]}
            strokeWidth={1}
        />
    }
}

const styles = StyleSheet.create({

});

export default connect((store, props: Props) => {
    const region = props.region
    const lat1 = region.latitude - region.latitudeDelta / 2
    const lat2 = region.latitude + region.latitudeDelta / 2
    const lng1 = region.longitude - region.longitudeDelta / 2
    const lng2 = region.longitude + region.longitudeDelta / 2
    const minlvl = DEFAULT_ZOOM_TO_LEVEL[Math.min(props.zoom - 1, DEFAULT_ZOOM_TO_LEVEL.length - 1)]
    const minlen = DEFAULT_ZOOM_TO_LINK_LENGTH[Math.min(props.zoom - 1, DEFAULT_ZOOM_TO_LINK_LENGTH.length - 1)] / 1000
    const renderPortal = props.zoom > 14
        ? Object
            .keys(store.entities.portals)
            .filter(guid => store.entities.portals[guid].level >= props.levels[0] && store.entities.portals[guid].level <= props.levels[1])
            .filter(guid => store.entities.portals[guid].coords.latitude > lat1 && store.entities.portals[guid].coords.latitude < lat2 && store.entities.portals[guid].coords.longitude > lng1 && store.entities.portals[guid].coords.longitude < lng2)
        : [props.selectedPortal ? props.selectedPortal.guid : null]
    const renderLink = Object
        .keys(store.entities.links)
        .filter(guid => {
            const l1 = store.entities.links[guid].coords[0].latitude
            const l2 = store.entities.links[guid].coords[1].latitude
            const n1 = store.entities.links[guid].coords[0].longitude
            const n2 = store.entities.links[guid].coords[1].longitude
            return !(l1 < lat1 && l2 < lat1 || l1 > lat2 && l2 > lat2 || n1 < lng1 && n2 < lng1 || n1 > lng2 && n2 > lng2) && calcCrow(l1, n1, l2, n2) >= minlen
        })
    //.map(guid => this.drawLink(guid, links[guid]))
    const renderField = Object
        .keys(store.entities.fields)
        .filter(guid => {
            const l1 = store.entities.fields[guid].coords[0].guid
            const l2 = store.entities.fields[guid].coords[1].guid
            const l3 = store.entities.fields[guid].coords[2].guid
            return store.entities.portals[l1] && store.entities.portals[l1].level >= minlvl ||
                store.entities.portals[l2] && store.entities.portals[l2].level >= minlvl ||
                store.entities.portals[l3] && store.entities.portals[l3].level >= minlvl
        })
    return {
        portals: store.entities.portals,
        fields: store.entities.fields,
        links: store.entities.links,
        renderPortal,
        renderField,
        renderLink
    }
}, {})(
    MapObjects
);