import React from 'react';
import { Modal, ScrollView, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
import { Button, Card, FormLabel } from 'react-native-elements';
import colors from '../../config/colors.json';
import { strings } from '../../locales/i18n';

const Confirm = ({ children, visible, onAccept, onDecline, onOkay }) => {
  if (onOkay) {
    return (
      <Modal
        animationType="slide"
        onRequestClose={() => {}}
        transparent
        visible={visible}
      >
        <TouchableOpacity
          style={styles.opacityStyle}
          activeOpacity={1}
          onPressOut={onOkay}
        >
          <ScrollView
            directionalLockEnabled
            centerContent
            contentContainerStyle={styles.scrollViewStyle}
          >
            <TouchableWithoutFeedback>
              <View style={styles.containerStyle}>
                <Card style={styles.cardStyle}>
                  <FormLabel style={styles.textStyle}>{children}</FormLabel>
                  <View>
                    <Button
                      onPress={onOkay}
                      title={strings('confirm.okay')}
                      buttonStyle={styles.buttonStyle}
                      fontWeight="bold"
                      fontSize={25}
                    />
                  </View>
                </Card>
              </View>
            </TouchableWithoutFeedback>
          </ScrollView>
        </TouchableOpacity>
      </Modal>
    );
  }

  return (
    <Modal
      animationType="slide"
      onRequestClose={() => {}}
      transparent
      visible={visible}
    >
      <TouchableOpacity
        style={styles.opacityStyle}
        activeOpacity={1}
        onPressOut={onDecline}
      >
        <ScrollView
          directionalLockEnabled
          centerContent
          contentContainerStyle={styles.scrollViewStyle}
        >
          <TouchableWithoutFeedback>
            <View style={styles.containerStyle}>
              <Card style={styles.cardStyle}>
                <FormLabel style={styles.textStyle}>{children}</FormLabel>
                <View>
                  <Button
                    onPress={onAccept}
                    title={strings('confirm.yes')}
                    buttonStyle={styles.buttonStyle}
                    fontWeight="bold"
                    fontSize={25}
                  />
                  <Button
                    onPress={onDecline}
                    title={strings('confirm.no')}
                    buttonStyle={styles.buttonStyle}
                    fontWeight="bold"
                    fontSize={25}
                  />
                </View>
              </Card>
            </View>
          </TouchableWithoutFeedback>
        </ScrollView>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = {
  opacityStyle: {
    backgroundColor: colors.modalTransparency,
    position: 'relative',
    flex: 1,
    justifyContent: 'center'
  },
  scrollViewStyle: {
    backgroundColor: colors.white,
  },
  containerStyle: {
    backgroundColor: colors.modalTransparency,
    position: 'relative',
    flex: 1,
    justifyContent: 'center'
  },
  cardStyle: {
    justifyContent: 'center'
  },
  textStyle: {
    flex: 1,
    fontSize: 18,
    textAlign: 'center',
    lineHeight: 40
  },
  buttonStyle: {
    backgroundColor: colors.buttonBlue,
    left: 0,
    right: 0,
    marginTop: 15,
    borderRadius: 5
  }
};

export { Confirm };
