import React, { PureComponent } from 'react';
import { View, StyleSheet, Text } 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 } from '../constants';

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: { [guid: string]: Portal }
    links: { [guid: string]: Link }
    fields: { [guid: string]: Field }
    region: Region
    onPortalClick: Function
}

class MapObjects extends PureComponent<Props> {
    render() {
        const region = this.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 portals = this.props.portals
        const fields = this.props.fields
        const links = this.props.links
        const zoom = this.props.zoom
        const renderPortal = Object.keys(portals)
            .filter(guid => portals[guid].coords.latitude > lat1 && portals[guid].coords.latitude < lat2 && portals[guid].coords.longitude > lng1 && portals[guid].coords.longitude < lng2)
            .map(guid => this.drawPortal(guid, portals[guid], this.props.onPortalClick))
        const renderLink = Object.keys(links)
            .filter(guid => {
                const l1 = links[guid].coords[0].latitude
                const l2 = links[guid].coords[1].latitude
                const n1 = links[guid].coords[0].longitude
                const n2 = links[guid].coords[1].longitude
                return !(l1 < lat1 && l2 < lat1 || l1 > lat2 && l2 > lat2 || n1 < lng1 && n2 < lng1 || n1 > lng2 && n2 > lng2)
            })
            .map(guid => this.drawLink(guid, links[guid]))
        const renderField = Object.keys(fields)
            .filter(guid => {
                const l1 = fields[guid].coords[0].latitude
                const l2 = fields[guid].coords[1].latitude
                const l3 = fields[guid].coords[2].latitude
                const n1 = fields[guid].coords[0].longitude
                const n2 = fields[guid].coords[1].longitude
                const n3 = fields[guid].coords[2].longitude
                return !(
                    l1 < lat1 && l2 < lat1 && l3 < lat1 || l1 > lat2 && l2 > lat2 && l3 > lat2 ||
                    n1 < lng1 && n2 < lng1 && n3 < lng1 || n1 > lng2 && n2 > lng2 && n3 > lng2
                )
            })
            .map(guid => this.drawField(guid, fields[guid]))

        if (zoom <= 14) {
            return [...renderField, ...renderLink]
        } else {
            return [...renderField, ...renderLink, ...renderPortal]
        }
    }
    drawPortal = (guid: string, entity: Portal, onPortalClick: Function) => {
        const size = 20
        return (<Marker
            key={guid}
            coordinate={entity.coords}
            onPress={() => onPortalClick(guid, entity.coords)}
        >
            {/* <Icon name={entity.fraction == "N" ? "circle-o" : "circle"} color={fillPortalColor[entity.fraction]} size={size} /> */}
            <View style={{
                borderWidth: 2,
                height: size,
                width: size,
                borderRadius: size / 2,
                borderColor: COLORS_LVL[entity.level],
                backgroundColor: fillPortalColor[entity.fraction],
                justifyContent: 'center',
                alignItems: 'center',
            }}>
                <Text style={{ fontWeight: 'bold' }}>{entity.level}</Text>
            </View>
        </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) => ({ portals: store.entities.portals, fields: store.entities.fields, links: store.entities.links }), {})(MapObjects)