// Toast component
// --------------------------------------------------
// Toast is a component that displays a message to the user at the bottom of the screen.
//
// Props:
// - visible: boolean to show or hide the toast
// - message: message to display
// - type: type of toast (success, error, warning)
// - onClose: function to call when the toast is closed
//
//
import React, { useState, useEffect, useRef } from 'react'
import { StyleSheet, View, Text, Modal, Animated } from 'react-native'
import { colors, spacing } from '../theme'
import { TouchableWithoutFeedback } from 'react-native'
import { MaterialIcons } from '@expo/vector-icons'
const Toast = ({
  visible = true,
  message,
  type = 'success',
  onClose,
  style,
  textStyle,
}) => {
  const toastStyle = {
    backgroundColor: colors[type],
    padding: spacing.s_2,
    borderRadius: spacing.s_1,
    flexDirection: 'row',
    alignItems: 'center',
    ...style,
  }

  return (
    <>
      {visible && (
        <Modal transparent={true} visible={visible}>
          <TouchableWithoutFeedback onPress={onClose}>
            <View style={styles.backdrop} />
          </TouchableWithoutFeedback>
          <View style={styles.container}>
            <View style={[toastStyle, styles.toast]}>
              <MaterialIcons
                name='check-circle'
                size={spacing.s_4}
                color={colors.white}
              />
              <Text style={[styles.text, textStyle]}>{message}</Text>
              <TouchableWithoutFeedback onPress={onClose}>
                <MaterialIcons
                  name='close'
                  size={spacing.s_6}
                  color={colors.white}
                  style={{ marginLeft: 'auto' }}
                />
              </TouchableWithoutFeedback>
            </View>
          </View>
        </Modal>
      )}
    </>
  )
}

export default Toast

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 8,
    right: 8,
    bottom: 60,
    // justifyContent: 'center',
    // alignItems: 'center',
  },
  text: {
    color: colors.white,
    width: '90%',
    marginLeft: spacing.s_2,
  },
  toast: {
    padding: spacing.s_2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backdrop: {
    // flex: 1,
    backgroundColor: 'rgba(0,0,0,0.1)',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
})