import React from "react"
import { View, TouchableOpacity, Text, StyleSheet } from "react-native"
import { colors } from "../components/Variables"

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.white_alpha,
    borderWidth: 4,
    borderColor: 'transparent',
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 10,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    marginTop: 15
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center"
  },
  subtitle: {
    color: colors.white,
    fontSize: 15,
    textAlign: "center"
  },
  buttonContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: 20,
    justifyContent: "space-between"
  }
})

export const Button = ({ text, subtitle = null, isBig = false, colorize = false,  onPress = () => {} }) => {

  const buttonBig = isBig ? {fontSize: 25} : {}
  const isClicked = colorize.clicked == colorize.id
  let buttonColor = {backgroundColor: colors.white_alpha}

  if(colorize && colorize.answered) {

    if(colorize.isCorrect) {
      buttonColor = {backgroundColor: colors.green_light, borderColor: isClicked ? colors.white_alpha : 'transparent'}
    } else {
      if(isClicked) {
        buttonColor = {backgroundColor: colors.red_light, borderColor: isClicked ? colors.white_alpha : 'transparent'}
      }
    }
  }

  if(subtitle) {
    return (
      <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor]}>
        <Text style={[styles.text, buttonBig]}>{text}</Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
      </TouchableOpacity>
    )
  } else {
    return (
      <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor]}>
        <Text style={[styles.text, buttonBig]}>{text}</Text>
      </TouchableOpacity>
    )
  }
}


export const ButtonContainer = ({ children }) => (
  <View style={styles.buttonContainer}>{children}</View>
)