import React from "react";
import { View, FlatList, Pressable, Image, Dimensions, Text } from "react-native";
import {useNavigation} from '@react-navigation/native';
import tw from "tailwind-rn";

const { width, height } = Dimensions.get("window");

import Header from "../../Home/components/Header";
import posterImage from "../../Products/assets/poster.png";

function MostViewedVideo({}) {
  const navigation = useNavigation();
  const Video = ({ video }) => {
    return (
      <Pressable
        style={[
          {
            width : 320,
          },
          tw("flex flex-col items-end rounded-md ml-4"),
        ]}
        onPress={() => navigation.navigate("Product")}
      >
        <View
          style={[
            tw(
              "w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
            ),
            { height: height / 3.8 },
          ]}
        >
          <Image
            source={video.poster}
            style={tw("w-full h-full absolute left-0 top-0 rounded-md")}
          />
          <Image
            source={{ uri: video.imageUrl }}
            style={[
              tw("rounded-md h-full absolute left-2 inset-y-1/4 rounded-md"),
              { width: 70, height: 100 },
            ]}
          />
        </View>
        <Text
          style={{
            fontSize: width / 27,
            marginTop: 5,
            color: "#05335F",
            fontFamily: "bold",
          }}
        >
          {video.name}
        </Text>

        <View
          style={tw("w-full flex flex-row justify-between items-center")}
        >
          <Text
            style={[
              tw(""),
              {
                marginTop: 10,
                color: "#132F52",
                fontFamily: "light",
                fontSize: width / 37,
              },
            ]}
          >
            {video.price}
          </Text>
          <Text
            style={{
              color: "#196EC0",
              fontFamily: "light",
              fontSize: width / 37,
              marginTop: 5,
            }}
          >
            {"پایه" + " " + video.grade}
          </Text>
        </View>
      </Pressable>
    );
  };
  return (
    <View style={tw("w-full flex flex-col w-full")}>
      <Header title="پربازدیدترین" />
      <FlatList
        horizontal={true}
        inverted={true}
        style={tw("pb-1.5  mt-3 flex flex-row w-full")}
        data={[0,1,2]}
        renderItem={({ item }) => (
          <Video
            video={{
              name: "ریاضی",
              price: "145.000 تومان",
              grade: "4",
              imageUrl: "https://dnvn.ir/api/v1/file/2105",
              poster: posterImage,
            }}
          />
        )}
        keyExtractor={(item) => item}
      />
    </View>
  );
}

export default MostViewedVideo;