import React, { useState, useEffect } from 'react';
import { Text, View, ScrollView, Image, StyleSheet } from 'react-native';
import API from './../API.js';
import VideoPlayer from './VideoPlayer.js';

const videoIdF = (content) => {
    let vimeoTag = content.match(/@vimeo:[0-9]+/);
    let youtubeTag = content.match(/@youtube:[0-z]+/);
    if (!vimeoTag && !youtubeTag) return [];
    let tag = youtubeTag || vimeoTag;
    tag = tag[0].substring(1);
    return tag.split(':');
};

const imagesTagF = (content) => {
    let images = content.match(/@image:[0-z|/|.|]+/g);
    if (!images) return [];
    let Tags = [];
    images.forEach(i => {
        let tag = i.substring(1);
        let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
        if (parts[1].substring(0, 4) != "http") parts[1] = "https://social.emmint.com/" + parts[1];
        Tags.push(parts);
    });
    return Tags;
};

const iframeTagF = (content) => {
    let iframeMatch = content.match(/@iframe:.+\w/g);
    if (!iframeMatch) return 0;
    let tag = iframeMatch[0].substring(1);
    let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
    return parts;
};


let Media = (props) => {
    const imagesTag = imagesTagF(props.content);
    const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
    const videosId = videoIdF(props.content);
    let [videosFiles, setVideosFiles] = useState([]);
    useEffect(async ()=>{
        if(!videosId[1]) return 0;
        let videoObj = await API.getVideo(videosId[1]);
        setVideosFiles(videoObj.files);
    }, [props.content])
    //const vimeo = videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : undefined;
    const vimeo = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> : null;
    return (
        <View>
            <View style={{ flexDirection: "row" }}>
                {
                    imagesTag.map((image, i) => {
                        return (
                            //<Text key={i}>{post.content}</Text>
                            <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} />
                        )
                    })
                }
            </View>
            {vimeo}
        </View>
    );
}

export default Media;

const styles = StyleSheet.create({
    image: {
        width: "100%",
        aspectRatio: 1,
    },
    multipleImage: {
        width: "49%",
        aspectRatio: 1,
        margin: 2,
    }
});