import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";

const Rhymes = () => {
  const [containerLayout, setContainerLayout] = useState(null);

  return (
    <View style={{ flex: 1, gap: 10 }}>
      <CreateLyricsHeader title="Avec ou sans rimes" />
      <View style={styles.blurContainer}>
        <BorderGradient
          gradientProps={{
            colors: ["#FFFFFF00", "#FFFFFF"],
          }}
          style={{
            ...styles.borderGradientStyle,
            height: containerLayout?.height,
          }}
        />
        <BlurView
          intensity={40}
          style={{ padding: 6, zIndex: 2, gap: 10 }}
          onLayout={(e) => {
            e.persist();
            setContainerLayout(e.nativeEvent.layout);
          }}
        >
          {Array.from({ length: 3 }).map((_, index) => (
            <View key={index} style={styles.itemContainer}>
              <BlurView
                intensity={30}
                style={{
                  flex: 1,
                  backgroundColor: Palette.glass,
                  justifyContent: "center",
                  paddingHorizontal: 12,
                }}
              >
                <Text style={styles.dropzone}>
                  Introduction instrumentale longue.
                </Text>
              </BlurView>
            </View>
          ))}
        </BlurView>
      </View>
    </View>
  );
};

export default Rhymes;

const styles = StyleSheet.create({
  borderGradientStyle: {
    borderWidth: 1,
    borderRadius: 20,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 100,
    position: "absolute",
    width: "100%",
  },
  itemContainer: {
    height: 54,
    backgroundColor: Palette.glass,
    borderRadius: 14,
    overflow: "hidden",
    shadowColor: "#00000040",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  dropzone: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  blurContainer: {
    borderRadius: 20,
    overflow: "hidden",
    zIndex: 1,
    maxHeight: responsiveHeight(55),
  },
});