import Taro, { Component } from '@tarojs/taro'
import { Map } from '@tarojs/components'
import icons from './icons'

export default class PoiAround extends Component {

  state = {
    current: undefined,
  }

  handleTap = (e) => {
    const marker = this.props.markers.filter(x => x.id === e.markerId)[0]

    this.setState({ current: e.markerId })
    this.props.onMarkerClick && this.props.onMarkerClick(marker)
  }

  render() {
    const { current } = this.state
    const markers =  (this.props.markers || []).map((marker, index) => {
      const icon = icons[index].normal
      const activeIcon = icons[index].active

      return {
        id: marker.id,
        latitude: marker.latitude,
        longitude: marker.longitude,
        iconPath: current === marker.id ? activeIcon : icon,
        width: 56,
        height: 56,
      }
    })

    return this.props.longitude && (
      <Map
        showLocation
        scale={12}
        markers={markers}
        longitude={this.props.longitude}
        latitude={this.props.latitude}
        onMarkerTap={this.handleTap}
        style={this.props.style}
      />
    )
  }
}
