import {   
  Animated,
} from 'react-native';

import Screen from './Screen';
import { HEADERHEIGHT, LISTMARGIN } from '../constants';
import Card from './Card';

import React from 'react';
import { useState } from 'react'
import AnimatedListHeader from './AnimatedListHeader';



const SearchScreenInfo = () => {

  const properties = [{
    id: 1,
    images: [
      "https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ],
    rentLow: 3750,
    rentHigh: 31054,
    bedroomLow: 1,
    bedroomHigh: 5,
    name: "The Hamilton",
    street: "555 NE 34th St",
    city: "Miami",
    state: "Florida",
    zip: 33137,
    tags: ["Parking"],
  },
  {
    id: 2,
    images: [
      "https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ],
    rentLow: 3750,
    rentHigh: 31054,
    bedroomLow: 1,
    bedroomHigh: 5,
    name: "The Hamilton",
    street: "555 NE 34th St",
    city: "Miami",
    state: "Florida",
    zip: 33137,
    tags: ["Parking"],
  },
  {
    id: 3,
    images: [
      "https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ],
    rentLow: 3750,
    rentHigh: 31054,
    bedroomLow: 1,
    bedroomHigh: 5,
    name: "The Hamilton",
    street: "555 NE 34th St",
    city: "Miami",
    state: "Florida",
    zip: 33137,
    tags: ["Parking"],
  },
  {
    id: 4,
    images: [
      "https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ],
    rentLow: 3750,
    rentHigh: 31054,
    bedroomLow: 1,
    bedroomHigh: 5,
    name: "The Hamilton",
    street: "555 NE 34th St",
    city: "Miami",
    state: "Florida",
    zip: 33137,
    tags: ["Parking"],
  },
  {
    id: 5,
    images: [
      "https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
      "https://images.pexels.com/photos/8031889/pexels-photo-8031889.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ],
    rentLow: 3750,
    rentHigh: 31054,
    bedroomLow: 1,
    bedroomHigh: 5,
    name: "The Hamilton",
    street: "555 NE 34th St",
    city: "Miami",
    state: "Florida",
    zip: 33137,
    tags: ["Parking"],
  },
  ];
  
  const [scrollAnimation] = useState(new Animated.Value(0));
  
 
  return (
    <Screen>

      <AnimatedListHeader scrollAnimation={scrollAnimation} />

      
      {/* Main FlatList to handle scrolling to view the properties listing */}

      <Animated.FlatList
      //Code to animate the header

        onScroll={Animated.event([
          {
            nativeEvent: {
              contentOffset: {
                y: scrollAnimation
              },
            },
          },
        ],
        {useNativeDriver: true}
        )}
        contentContainerStyle={{paddingTop: HEADERHEIGHT - 20}}
        bounces={false}
        scrollEventThrottle={16}
        data={properties}
        keyExtractor={(item) => item.id.toString()}
        showsVerticalScrollIndicator={false}
        style={{ marginHorizontal: LISTMARGIN }}
        renderItem={({item}) => (

      <Card property={item}/>

        )}
      
      />      

    </Screen>
  )
}

export default SearchScreenInfo