import React from "react";
import {
  View,
  Text,
  StyleSheet,
} from "react-native";

// 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;