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

const screen = Dimensions.get("window");

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  box: {
    backgroundColor: 'rgba(40, 160, 40, 0.9)',
    width: screen.width / 1.1,
    height: screen.height / 2,
    borderRadius: 5,
    borderColor: 'rgba(255, 255, 255, 0.5)',
    borderWidth: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  boxLooser: {
    backgroundColor: 'rgba(175, 50, 30, 0.9)',
    width: screen.width / 1.1,
    height: screen.height / 2,
    borderRadius: 5,
    borderColor: 'rgba(255, 255, 255, 0.5)',
    borderWidth: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    color: "#fff",
    fontSize: 25,
    textAlign: "center",
    letterSpacing: -0.02,
    fontWeight: "500",
    lineHeight: 90
  },
  textLabel: {
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  correct: {
    color: "#28A125"
  },
  wrong: {
    color: "#af321e"
  }
});

export const Results = ({ correct, wrong, visible }) => {
  if (!visible) return null;

  const total = wrong+correct
  const percentage = (100/total) * correct
  const boxStyle = percentage > 80 ? styles.box : styles.boxLooser
  const percentStyle = percentage > 80 ? styles.correct : styles.wrong

  return (
    <View style={styles.container}>
      <View style={boxStyle}>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`Corrette: `}</Text>
          <Text >
            {`${correct}`}
          </Text>
        </Text>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`Sbagliate: `}</Text>
          <Text>
            {`${wrong}`}
          </Text>
        </Text>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`Percentuale: `}</Text>
          <Text >
            {`${Math.round(percentage)}%`}
          </Text>
        </Text>
      </View>
    </View>
  );
};