import React, { Component } from "react";
import { withStyles } from '@material-ui/core/styles';
import {getX, getY} from './utilCoords'
import { Icon, Typography } from "@material-ui/core";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { mapaH, mapaW } from "odi-utils/constants"

const styles = ({
    root: {
      flexGrow: 1,
      marginTop: 30,
    }
  });


class Simulacion7Dias extends Component {
    almacenes = [
        {
            ubigeo: '150101',
            provincia: 'LIMA',
            latitud:-12.04591952,
            longitud: -77.03049615,
            region: 'Costa',
            esPrincipal: 1
            },{
            ubigeo: '130101',
            provincia: 'TRUJILLO',
            latitud: -8.11176389,
            longitud: -79.02868652,
            region: 'Costa',
            esPrincipal: 1
            },{
            ubigeo: '040101',
            provincia: 'AREQUIPA',
            latitud:-16.39881421,
            longitud: -71.537019649,
            region: 'Costa',
            esPrincipal: 1
            },{
            ubigeo: '050301',
            provincia: 'HUANCA SANCOS',
            latitud:-13.91988366,
            longitud: -74.33388289,
            region: 'Costa',
            esPrincipal: 0
            }
    ]
    render() { 
        return (
            <>
                <Typography variant="h4">
                    {`Resultado de simulación a 7 días`}
                </Typography>
            <TransformWrapper
                defaultScale={1}
                maxScale={1.8}
                defaultPositionX={200}
                defaultPositionY={100}
            >
                <TransformComponent>
                    <div>
                        <img src={require("../../../../public/images/mapaM.png")}/>
                        {this.almacenes.map((item,index) => { 
                            console.log(index)
                            return <div style={{ position: 'absolute', left:`${getX(item.longitud)}px`, top: `${getY(item.latitud)}px`, color:"black"}}>
                                <Icon style={item.esPrincipal==1? {color:'blue', fontSize:18}:{color:'black', fontSize:15}}>house</Icon>
                                </div>
                        })}
                    </div>
                    <svg width={mapaW} height={mapaH} style={{position: 'absolute', left: '14px' , top: '34px'}}>
                <path fill="none" stroke="red"
                    d="M 160 437, L 82 283, L 376 600" />
                    <circle r="5" fill="red">
                    <animateMotion dur="10s" repeatCount={1}
                        path="M 163 437, L 85 283, L 378 600"/>
                    </circle>
                </svg>
                </TransformComponent>
            </TransformWrapper>
            </>
        );
    }
}
 
export default withStyles(styles)(Simulacion7Dias);