import { View, Text, Pressable, StyleSheet, Platform } from "react-native";
import React from "react";
import SearchBar from "../../../components/SearchBar";
import { Palette, Style } from "../../../styles";
import BorderGradient from "../../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../../styles/Fonts";

const ResearchHeader = ({
  onPress,
  selected,
  searchValue = "",
  onChangeSearch = () => {},
  showSearchBar = true,
  autoFocusSearch = true,
}) => {
  return (
    <View style={{ gap: 12 }}>
      {showSearchBar && (
        <SearchBar
          textInputProps={{
            value: searchValue,
            onChangeText: onChangeSearch,
            autoFocus: autoFocusSearch,
          }}
        />
      )}
      <View
        style={{
          ...Style.containerRow,
          gap: 6,
        }}
      >
        {["Musiques", "Playback", "Profils"].map((item, index) => (
          <Pressable key={index} onPress={() => onPress(item)}>
            <BorderGradient
              gradientProps={{
                colors:
                  selected === item
                    ? ["#F94697", "#7023F7"]
                    : [Palette.tran, Palette.tran],
                locations: [0, 1],
                start: { x: 0, y: 0 },
                end: { x: 1, y: 0 },
              }}
              style={styles.borderGradient}
            />
            <View style={styles.blurContainer}>
              <BlurView
                intensity={Platform.OS !== "ios" ? 10 : 20}
                style={styles.blurView}
                // experimentalBlurMethod={
                //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                // }
              >
                <Text style={styles.menu}>{item}</Text>
              </BlurView>
            </View>
          </Pressable>
        ))}
      </View>
    </View>
  );
};

export default ResearchHeader;

const styles = StyleSheet.create({
  menu: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  borderGradient: {
    borderWidth: 1,
    borderRadius: 100,
    height: 30,
    position: "absolute",
    zIndex: 1,
    width: "100%",
  },
  blurContainer: {
    height: 30,
    zIndex: -1,
    borderRadius: 100,
    overflow: "hidden",
    backgroundColor: Palette.glass,
  },
  blurView: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    paddingHorizontal: 10,
  },
});