import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Linking, Pressable} from "react-native";
import Tools from "./analisis.json";

// TOOL DESCRIPTIONS
const bodyEJScreen = "EJScreen es..... Presione para ir al enlace."
const bodyCEJST = "CEJST es..... Presione para ir al enlace."
const bodyEJAtlas = "EJAtlas es..... Presione para ir al enlace."
const bodyIPCC = "El ''Intergovernmental Panel on Climate Change'' o IPCC es..... Presione para ir al enlace."

const Analisis = () => {
    return (
        <View>

            {/* TAB TITLE CODE*/}
            {/* TAB TITLE */}
            <Text style={styles.Tab}> 
                Enlaces a Herramientas de Análisis Externas
            </Text>

            {/* FIRST TOOL CODE*/}
            {/* FIRST TOOL TITLE */}
            <View style={styles.Number}>
                <Text style={styles.Number}>
                    1)</Text>
                <Text style={styles.Title} 
                onPress={ ()=> Linking.openURL('https://ejscreen.epa.gov/mapper/') }>
                    Enlace a EJScreen
                </Text>
            </View>
            {/* FIRST TOOL BODY */}
            <View style={styles.Bullet}>
                <Text style={styles.Bullet}>
                    {'\u002D'}
                </Text>
                <Text style={styles.Body}>
                    {bodyEJScreen}
                </Text>
            </View>

            {/* SECOND TOOL CODE*/}
            {/* SECOND TOOL TITLE */}
            <View style={styles.Number}>
                <Text style={styles.Number}>
                    2)</Text>
                <Text style={styles.Title} 
                onPress={ ()=> Linking.openURL('https://screeningtool.geoplatform.gov/en/#3/33.47/-97.5') }>
                    Enlace a CEJST
                </Text>
            </View>
            {/* SECOND TOOL BODY */}
            <View style={styles.Bullet}>
                <Text style={styles.Bullet}>
                    {'\u002D'}
                </Text>
                <Text style={styles.Body}>
                    {bodyCEJST}
                </Text>
            </View>

            {/* THIRD TOOL CODE*/}
            {/* THIRD TOOL TITLE */}
            <View style={styles.Number}>
                <Text style={styles.Number}>
                    3)</Text>
                <Text style={styles.Title} 
                onPress={ ()=> Linking.openURL('https://ejatlas.org/') }>
                    Enlace a EJAtlas
                </Text>
            </View>
            {/* THIRD TOOL BODY */}
            <View style={styles.Bullet}>
                <Text style={styles.Bullet}>
                    {'\u002D'}
                </Text>
                <Text style={styles.Body}>
                    {bodyEJAtlas}
                </Text>
            </View>

            {/* FOURTH TOOL CODE*/}
            {/* FOURTH TOOL TITLE */}
            <View style={styles.Number}>
                <Text style={styles.Number}>
                    4)</Text>
                <Text style={styles.Title} 
                onPress={ ()=> Linking.openURL('https://www.ipcc.ch/') }>
                    Enlace al IPCC
                </Text>
            </View>
            {/* FOURTH TOOL BODY */}
            <View style={styles.Bullet}>
                <Text style={styles.Bullet}>
                    {'\u002D'}
                </Text>
                <Text style={styles.Body}>
                    {bodyIPCC}
                </Text>
            </View>
        
        </View>
    )
}

const styles = StyleSheet.create({
    Tab: { fontSize: 30,
           textAlign: "center",
           marginTop: "12%",
           marginLeft: "1.4%",
           marginRight: "1.4%"
    },

    Number: { fontSize: 23,
        textAlign: "left",
        marginLeft: "2.5%",
        marginTop: "5.5%",
        flexDirection: 'row'
    },

    Title: { fontSize: 23,
                textAlign: "left",
                marginTop: "5.5%", 
                color: "#6495ed",
                flex: 0,
                paddingLeft: 6
    },

    Body: { fontSize: 18,
                textAlign: "left",
                marginTop: "2%",
                flex: 1, 
                paddingLeft: 5
    }, 

    Bullet: { fontSize: 18,
              textAlign: "left",
              marginLeft: "6%",
              marginTop: "2%",
              flexDirection: 'row'
    }
  });

export default Analisis