
import { 
    View, 
    Dimensions, 
    StyleSheet,
  } from 'react-native';
  
import React from 'react';

import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Text, Button } from "@ui-kitten/components";
import { appTheme } from "../theme";
import { Property } from '../types/property';

import Row from './Row';
  
const LISTMARGIN = 10;
const WIDTH = Dimensions.get("screen").width - LISTMARGIN * 2;

const CardInformation = ({ property}:{property: Property}) => {
  return (
    <View
      style={styles.informationContainer}>

      {/* Property text data - Row component imported */}
      <Row 
        style={styles.rowJustification}>

        <Text category={"h6"}>
          ${property.rentLow.toLocaleString()} -{" "} 
          {property.rentHigh.toLocaleString()}
        </Text>
        <MaterialCommunityIcons 
          name="heart-outline" 
          color={appTheme["color-primary-500"]}
          size={24}/>
      </Row>

      <Text category={"p1"}>
        {property.bedroomLow.toLocaleString()} -{" "} 
        {property.bedroomHigh.toLocaleString()} Beds
      </Text>

      <Text category={"p1"} style={styles.defaultMarginTop}>
        {property.name} 
      </Text>

      <Text category={"p1"}>
        {property.street} 
      </Text>

      <Text category={"p1"}>
        {property.city}, {property.state}, {property.zip}
      </Text>

      <Text category={"p1"} style={styles.defaultMarginTop}>
        {property.tags.map((tag, index) =>
          index === property.tags.length - 1 ? tag : tag + ", "  
          //looping (mapping) through the tags and comparing the index (i) or position of the loop to the number of propertys in the array. If its less than the length minus 1, we need to add a comma and a space after the word.  
          // ? means if true
          // : means else  
          // expression after else could be simplified with `${tag}, `
        )} 
      </Text>

      {/* Button data - Row component imported */}

      <Row 
        style={{            
          marginTop: 5, 
          justifyContent: "space-between" 
        }}>          
        
        <Button
          appearance={"ghost"}
          style={[
            styles.button,
            { borderColor: appTheme["color-primary-500"]},                         
          ]}
          size="medium"
          onPress={() => console.log("email the property manager")}>
          Email
        </Button>

        <Button
          style={[
            styles.button,
            { borderColor: appTheme["color-primary-500"]},                         
          ]}
          size="medium" 
          onPress={() => console.log("call the property manager")}>
          Call
        </Button>

        {/* Calling the buttontest component and passing it props */}
        {/* <ButtonTest
          onPress={() => console.log("testing the new button")}
          title='Test'              
          style={{               
                    
          }}            
        /> */}

      </Row>

    </View> 
  )
}

export default CardInformation

const styles = StyleSheet.create({


  button: {
    width: "49%",
  },
  defaultMarginTop: {
    marginTop: 5
  },
  rowJustification: {
    justifyContent: "space-between" 
  },
  informationContainer: {
    paddingVertical: 10,
    paddingHorizontal: 5,
    borderColor: "#d3d3d3",
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    borderWidth: 1,
  }
})