import { useContext } from "reactn";
import { Pressable, View, Image, Text } from "react-native";
import { Video, ResizeMode } from "expo-video";
import { Fonts, gutters, Palette } from "../styles";
import Style, { mainBorderRadius } from "../styles/Style";
import { icons } from "../assets";
import { substringTextLength } from "../helpers";
import { WebViewContext } from "../providers/WebViewProvider.js";

const thumbnailStyle = {
  width: 200,
  height: 200,
  borderRadius: mainBorderRadius / 2,
  overflow: "hidden",
};

const RenderChatFile = (
  { uri, type = "image", name = "", containerStyle = {} },
  index,
) => {
  const { setWebViewUrl } = useContext(WebViewContext);

  return (
    <View
      key={index}
      style={{
        ...Style.containerRow,
        ...containerStyle,
      }}
    >
      {type === "IMAGE" ? (
        <Pressable>
          <Image
            alt={name}
            source={{
              uri,
            }}
            style={thumbnailStyle}
          />
        </Pressable>
      ) : type === "FILE" ? (
        <Pressable
          onPress={() => {
            setWebViewUrl(uri);
          }}
          style={{
            ...Style.containerRow,
            ...Style.containerCenter,
            backgroundColor: Palette.transparentPrimary,
            padding: gutters / 2,
            borderRadius: mainBorderRadius / 2,
          }}
        >
          <Image
            resizeMode="contain"
            source={icons.attachment}
            style={{
              ...Style.iconSmall,
              marginRight: 5,
            }}
          />
          <Text
            style={Fonts({
              type: "default",
              style: {
                color: Palette.white,
                textDecorationLine: "underline",
              },
            })}
          >
            {substringTextLength({ text: name, maxLength: 40 })}
          </Text>
        </Pressable>
      ) : type === "VIDEO" ? (
        <Video
          style={{ ...thumbnailStyle }}
          source={{
            uri,
          }}
          //   posterSource={{
          //     uri: thumbnailURI,
          //   }}
          //   usePoster={thumbnailURI ? true : false}
          useNativeControls
          resizeMode={ResizeMode.CONTAIN}
          isLooping
          // onPlaybackStatusUpdate={status => setStatus(() => status)}
        />
      ) : null}
    </View>
  );
};

export default RenderChatFile;