import React, {Component, useState} from 'react';
import {View, Text, TouchableOpacity, StyleSheet, Button} from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
import R from '../assets/R';
import {WIDTHXD} from '../Config/Functions';
import Modal from 'react-native-modal';

const PlussModal = (props) => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={styles.container}>
      <View style={styles.wraper}>
        <TouchableOpacity onPress={toggleModal} style={styles.btn}>
          <Icon name={'plus'} size={27} color={R.colors.white} />
        </TouchableOpacity>
      </View>

      <Modal isVisible={isModalVisible}>
        <View style={{flex: 1}}>
          <Text>Hello!</Text>

          <Button title="Hide modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

export default PlussModal;

const styles = StyleSheet.create({
  btn: {
    backgroundColor: R.colors.main,
    width: WIDTHXD(144),
    height: WIDTHXD(144),
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 3,
    borderRadius: 30,
  },
  container: {
    flex: 1,
  },
  wraper: {
    backgroundColor: R.colors.white,
    width: WIDTHXD(175),
    height: WIDTHXD(175),
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: -20,
    left: 15,
    borderRadius: WIDTHXD(90),
  },
});
