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


import useComponentVisible from '../../components/ComponentVisible'

export const goTo = (navigation, place) => navigation.navigate("vuDetails",{room : place});

export const InfoWindow = (props) => {
    const { place, navigation } = props;


    const { ref, isComponentVisible } = useComponentVisible(true);

  //
    // console.log(route.param.name)
    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 (
      isComponentVisible &&(
      <View ref={ref}>

        <TouchableOpacity>
          <View style={{width: 200, height: 100, backgroundColor: "white"}}>
            <Text style = {{fontSize: 16}}>
              {place.name}
            </Text>

            <View style = {{fontSize: 14}}>

              <Text style={{ fontSize: 14, color: 'grey' }}>
                {place.types[0]}
              </Text>

              <View style={{ flexDirection: "row"}}>
                <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>
              </View>
              <Text style = {{ color: 'grey' }}>
                {place.rating}
              </Text>
                <Text style={{ fontSize: 14, color: 'green' }}>
                  {place.loue.loue ? 'disponible' : 'occupé'}
                </Text>




              <Button onPress={() => goTo(navigation, place)} title={`voir`} />
            </View>
          </View>
        </TouchableOpacity>

      </View>
      )

    )

    // 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>
    // );

  };