import {
  View,
  Text,
  Image,
  Pressable,
  StyleSheet,
  Platform,
} from "react-native";
import React, { useEffect, useState } from "react";
import { Palette, Style } from "../../../styles";
import { icons, img } from "../../../assets";
import { size } from "../../../styles/Style";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../../styles/Fonts";

const MusicCard = ({ onPress, onPressMore }) => {
  const [selected, setSelected] = useState(false);
  const [open, setOpen] = useState(false);
  const [layout, setLayout] = useState(null);
  const [menuPos, setMenuPos] = useState(0);

  useEffect(() => {
    if (layout) {
      const top = layout?.y + 45;
      setMenuPos(top);
    }
  }, [layout]);

  const onPressMenu = () => {
    onPressMore?.(menuPos);
  };

  return (
    <>
      <Pressable
        style={{
          ...Style.containerRow,
          gap: 6,
        }}
        onPress={onPress}
        onLayout={(e) => setLayout(e.nativeEvent.layout)}
      >
        <Image
          source={img.placeholder2}
          style={{ ...size({ size: 60 }), borderRadius: 12 }}
        />
        <View style={styles.blurContainer}>
          <BlurView
            intensity={20}
            style={{
              flex: 1,
              ...Style.containerSpaceBetween,
              paddingHorizontal: 8,
            }}
            experimentalBlurMethod={
              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
            }
          >
            <View>
              <Text style={styles.title}>Alors on danse</Text>
              <Text style={styles.subTitle}>Stromae</Text>
            </View>
            <View
              style={{
                ...Style.containerRow,
                gap: 12,
              }}
            >
              <Pressable onPress={() => setSelected(!selected)}>
                <Image
                  source={selected ? icons.heart : icons.heartOutline}
                  style={size({ size: 24 })}
                  resizeMode="contain"
                />
              </Pressable>
              <Pressable onPress={onPressMenu}>
                <Image source={icons.more} />
              </Pressable>
            </View>
          </BlurView>
        </View>
      </Pressable>
      {/* {open && (
        <View
          style={{
            width: 100,
            height: 50,
            backgroundColor: "red",
            position: "absolute",
            right: 0,
            top: menuPos,
            zIndex: 2,
          }}
        />
      )} */}
    </>
  );
};

export default MusicCard;

const styles = StyleSheet.create({
  blurContainer: {
    borderRadius: 12,
    overflow: "hidden",
    flex: 1,
    height: "100%",
  },
  title: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.OwnersRegular,
  },
  subTitle: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  filterContainer: {
    backgroundColor: Palette.tran,
  },
});
