import { TouchableOpacity, Button, View, Text } from "react-native";

export const InfoWindow = (props) => {
    const { place, navigation } = props;
    //
    // console.log(route.param.name)
    const goTo = () => navigation.navigate("vuDetails",{name : place});
    const infoWindowStyle = {
      position: 'relative',
      bottom: 150,
      width: 220,
      backgroundColor: 'white',
      boxShadow: '0 2px 7px 1px rgba(0, 0, 0, 0.3)',
      padding: 10,
      fontSize: 14,
      zIndex: 100,
    };

    return (
          <TouchableOpacity>
            <View>
              <Text style = {{fontSize: 16}}>
                {place.name}
              </Text>
              <View style = {{fontSize: 14}}>
                <Text style = {{ color: 'grey' }}>
                  {place.rating}
                </Text>
                <Text style = {{ color: 'orange' }}>
                  {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
                </Text>
                <Text style = {{ color: 'lightgrey' }}>
                  {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
                </Text>
                <Button onPress={goTo} title={`voir`} />
              </View>
            </View>
          </TouchableOpacity>
    )

    return (
      <div ref={ref}>
        {isComponentVisible &&(
      <TouchableOpacity>
              <div  style={infoWindowStyle}>

                <div style={{ fontSize: 16 }}>
                  {place.name}
                </div>
                <div style={{ fontSize: 14 }}>
          <span style={{ color: 'grey' }}>
            {place.rating}
            {' '}
          </span>
                  <span style={{ color: 'orange' }}>
            {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
          </span>
                  <span style={{ color: 'lightgrey' }}>
            {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
          </span>
                </div>
                <div style={{ fontSize: 14, color: 'grey' }}>
                  {place.types[0]}
                </div>
                <div style={{ fontSize: 14, color: 'grey' }}>
                  {'$'.repeat(place.price_level)}
                </div>
                <div style={{ fontSize: 14, color: 'green' }}>
                  {place.loue.loue ? 'disponible' : 'occupé'}
                </div>
                <Button onPress={goTo} title={`voir`} />
              </div>
      </TouchableOpacity>
        )}
      </div>
    );

  };