vds_quiz/vds-app/App/components/Results.js

import React from "react"
import { View, StyleSheet, Dimensions, Text, Image, ImageBackground } from "react-native"
import { colors, texts } from "../components/Variables"

const screen = Dimensions.get("window")
const imgError = require("../assets/error.jpg")
const imgUnsafe = require("../assets/unsafe.jpg")
const imgPassed = require("../assets/passed.jpg")
const imgPanorama = require("../assets/panorama.jpg")
const imgPanorama2 = require("../assets/panorama2.jpg")

const styles = StyleSheet.create({
  container: {
    top: 0,
    left: 0,
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    height: screen.height-80,
    width: screen.width,
    backgroundColor: colors.white_alpha
  },
  box: {
    position: "absolute",
    top: (screen.height/2)-220,
    width: screen.width-50,
    borderRadius: 15,
    height: 420,
    borderColor: colors.white_alpha,
    borderWidth: 0
  },
  text: {
    color: colors.white,
    fontSize: 22,
    textAlign: "center",
    fontWeight: "400",
    lineHeight: 40,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  textSmall: {
    marginTop: 20,
    color: colors.white,
    fontSize: 26,
    textAlign: "center",
    fontWeight: "500",
    lineHeight: 30,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  textLabel: {
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  correct: {
    color: colors.green
  },
  wrong: {
    color: colors.red
  },
  unsafe: {
    color: colors.yellow
  },
  bg: {
    width: "100%",
    height: "100%",
    borderRadius: 5,
    paddingVertical: 50
  },
  bgStyle: {
    borderRadius: 0,
    opacity: 0.8,
    borderColor: colors.white_alpha,
    borderWidth: 0
  }
})

export const Results = ({ results, visible }) => {
  if (!visible) return null

  //const percentage = results.totalPoints ? (100/results.totalPoints) * results.points : 0
  const percentage = results.total ? (100/results.total) * results.correct : 0
  let bgImage = results.points >= 80 ? results.points >= 85 ? imgPassed : imgUnsafe : imgError
  let imgPanoramaResult = results.points >= 80 ? imgPanorama : imgPanorama2

  if(!results.isExam) {
    bgImage = percentage >= 80 ? percentage >= 85 ? imgPassed : imgUnsafe : imgError
    imgPanoramaResult = percentage >= 80 ? imgPanorama : imgPanorama2
  }

  return (

    <ImageBackground source={imgPanoramaResult} style={[styles.bg, styles.container]} resizeMode="cover">

      <View style={styles.box}>
        <ImageBackground source={bgImage} style={styles.bg} imageStyle={styles.bgStyle} resizeMode="cover">


        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`${texts.corrects}: ${results.correct}`}</Text>
        </Text>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`${texts.wrongs}: ${results.wrong}`}</Text>
        </Text>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
        </Text>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`${texts.points}: ${results.points}/${results.totalPoints}`}</Text>
        </Text>

        {results.isExam ?
          <Text style={styles.textSmall}>
            {results.points >= 80 ? results.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed}
          </Text> : <Text/>
        }

        </ImageBackground>
      </View>
    </ImageBackground>

  )
}