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

const CreateLyricsHeader = ({
  title = "",
  subTitle = "",
  children,
  colors = ["#FFFFFF00", "#FFFFFF"],
  gradientProps,
  intensity = 40,
  tint = "dark",
  containerStyle = {},
  onPress,
  blurViewStyle = {},
  showBorder = true,
  disableBlur = false,
}) => {
  const [onLayout, setOnLayout] = useState(null);
  const { isWeb } = useLayoutType();

  return (
    <Pressable onPress={onPress}>
      {showBorder && (
        <BorderGradient
          gradientProps={{
            colors: colors,
            locations: [0.2, 1],
            start: { x: 0, y: 0 },
            end: { x: 1, y: 0 },
            ...gradientProps,
          }}
          style={{
            height: isWeb ? onLayout?.height + 2 : onLayout?.height,
            top: isWeb ? -1 : 0,
            borderWidth: 1,
            borderRadius: containerStyle?.borderRadius ?? 18,
            position: "absolute",
            width: isWeb ? onLayout?.width + 2 : onLayout?.width,
            left: -1,
            alignSelf: "center",
          }}
        />
      )}
      <View
        style={{
          backgroundColor: Palette.glass,
          borderRadius: 18,
          overflow: "hidden",
          ...containerStyle,
        }}
        onLayout={(event) => {
          setOnLayout(event.nativeEvent.layout);
        }}
      >
        {disableBlur ? (
          <View
            style={{
              paddingHorizontal: 12,
              paddingVertical: 8,
              gap: 4,
              ...blurViewStyle,
            }}
          >
            {title && (
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                }}
              >
                {title}
              </Text>
            )}
            {subTitle && (
              <Text
                style={{
                  fontSize: 12,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                {subTitle}
              </Text>
            )}
            {children}
          </View>
        ) : (
          <BlurView
            intensity={intensity}
            tint={tint}
            style={{
              paddingHorizontal: 12,
              paddingVertical: 8,
              gap: 4,
              ...blurViewStyle,
            }}
            experimentalBlurMethod={
              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
            }
          >
            {title && (
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                }}
              >
                {title}
              </Text>
            )}
            {subTitle && (
              <Text
                style={{
                  fontSize: 12,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                {subTitle}
              </Text>
            )}
            {children}
          </BlurView>
        )}
      </View>
    </Pressable>
  );
};

export default CreateLyricsHeader;
