import { View, Text, Pressable, Image } from "react-native";
import React, { useState } from "react";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { icons, img } from "../../assets";
import Style, { gutters, size } from "../../styles/Style";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { goBack } from "../../navigation/NavigationService";
import { SheetManager } from "react-native-actions-sheet";

const Reels = () => {
  const { top } = useSafeAreaInsets();
  const [isFav, setIsFav] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <View
        style={{
          ...Style.containerRow,
          position: "absolute",
          top: top + 10,
          zIndex: 1,
          paddingHorizontal: gutters,
        }}
      >
        <View style={{ flex: 1 }}>
          <Pressable onPress={goBack}>
            <Image
              source={icons.chevronDown}
              style={{
                ...size({ size: 15 }),
                transform: [{ rotate: "90deg" }],
              }}
              resizeMode="contain"
            />
          </Pressable>
        </View>
        <Text
          style={{
            fontSize: 16,
            color: Palette.white,
            fontFamily: FONT_FAMILY.InterRegular,
          }}
        >
          Mon Profile
        </Text>
        <View style={{ flex: 1, alignItems: "flex-end" }}>
          <Pressable onPress={() => SheetManager.show("DeletePlayback")}>
            <Image source={icons.trash} />
          </Pressable>
        </View>
      </View>
      <Image
        source={img.placeholder3}
        style={{ width: "100%", height: "100%" }}
      />
      <View
        style={{
          position: "absolute",
          zIndex: 1,
          bottom: gutters * 2,
          right: 33,
          gap: 20,
        }}
      >
        <Pressable onPress={() => setIsFav(!isFav)}>
          <Image
            source={isFav ? icons.heart : icons.heartOutline}
            style={size({ size: 26 })}
            resizeMode="contain"
          />
        </Pressable>
        <Pressable>
          <Image
            source={icons.share}
            style={size({ size: 26 })}
            resizeMode="contain"
          />
        </Pressable>
      </View>
    </View>
  );
};

export default Reels;
