import { 
    Animated, 
    StyleSheet, 
    LayoutChangeEvent, 
    View, 
    TouchableOpacity,
    Platform,
    FlatList,
} from 'react-native'

import React, { useState } from 'react'
import { HEADERHEIGHT, LISTMARGIN } from '../constants'
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { appTheme } from '../theme';
import { Button, Text } from '@ui-kitten/components';
import Row from './Row';

const AnimatedListHeader = ({scrollAnimation}:{scrollAnimation: Animated.Value}) => {



    const [offsetAnimation] = useState(new Animated.Value(0));
    const [clampedScroll, setClampedScroll] = useState(
        Animated.diffClamp(
        Animated.add(
            scrollAnimation.interpolate({
            inputRange: [0,1],
            outputRange: [0,1],
            extrapolateLeft: "clamp"
            }),
            offsetAnimation       
        ),
        0,
        1
        )
    )

    const navbarTranslate = clampedScroll.interpolate({
        inputRange : [0, HEADERHEIGHT],
        outputRange: [0, -HEADERHEIGHT],
        extrapolate: "clamp",
      });
    
    const onLayout = (event: LayoutChangeEvent) => {
    let { height } = event.nativeEvent.layout;

    setClampedScroll(
        Animated.diffClamp(
        Animated.add(
            scrollAnimation.interpolate({
            inputRange: [0,1],
            outputRange: [0,1],
            extrapolateLeft: "clamp"
            }),
            offsetAnimation       
        ),
        0,
        height
        )
    )

    }

    const filterButtons = [
        {
            iconName: "filter-variant",
            onPress: () => console.log("filter all"),
        },
        {
            label: "Price",
            onPress: () => console.log("price"),
        },
        {
            label: "Move In Date",
            onPress: () => console.log("move in date"),
        },
        {
            label: "Pets",
            onPress: () => console.log("pets"),
        },
    ];


  return (
    <Animated.View
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          left: 0,
          zIndex: 1000,
          height: HEADERHEIGHT,
          backgroundColor: "#fff",
          transform: [{ translateY: navbarTranslate }],
        }}
        onLayout={onLayout}      
    >
        <View style={styles.AnimatedHeaderStyle}>

            <TouchableOpacity style={styles.TouchableOpacityStyle} onPress={() => console.log("navigate to the input screen")}>
                
                <Row style={styles.RowStyle}>
                <MaterialCommunityIcons name="magnify" color={appTheme["color-primary-500"]} size={28} />
                <Text style={styles.Text}>Find a Location</Text>
                </Row>

            </TouchableOpacity>

          <FlatList 
            style={styles.FlatListStyle}
            data={filterButtons}
            horizontal
            showsHorizontalScrollIndicator={false}
            renderItem={({ item, index }) => {
                if (item.iconName) {
                    return <Button
                        appearance={'ghost'}
                        style={[styles.Searchbtn, {width: 48}]}
                        onPress={item.onPress}
                        accessoryLeft={
                            <MaterialCommunityIcons 
                                name={item.iconName as any} 
                                size={20} 
                                color={appTheme["color-primary-500"]}
                                />
                        }                    
                    >

                    </Button>
                }
                return <Button
                    appearance={'ghost'}
                    style={styles.Searchbtn}
                    onPress={item.onPress}                 
                >
                    {item.label}

                </Button>

            }}
            keyExtractor={(_, index) => index.toString()}
            >
            


          </FlatList>

        </View>


    </Animated.View>
  )
}

export default AnimatedListHeader

const styles = StyleSheet.create({

    AnimatedHeaderStyle: {
        marginHorizontal: LISTMARGIN
    },
    TouchableOpacityStyle: {
        marginTop: Platform.OS === "ios" ? 50 : 5,
        borderWidth: 1,
        borderColor: appTheme["search-border-default"],
        borderRadius: 30,
        padding: 10,        
    },
    RowStyle: {
        alignItems: "center"
    },
    Text: {
        marginLeft: 10

    },
    Searchbtn: {
        borderRadius: 30,
        borderColor: appTheme["search-border-default"],
        marginHorizontal: 3,

    }, 
    FlatListStyle: {
        marginTop: 10
    }
    

})