import React, {ReactNode} from 'react';
import {
  Modal as BaseModal,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  StyleProp,
  ViewStyle,
} from 'react-native';
import {Colors, fontSz, globalStyles, ms} from '../../utils';

type ModalProps = {
  visible: boolean;
  onClose?: () => void;
  children: ReactNode;
  title?: string;
  avoidKeyboard?: boolean;
  onBackButtonClick?: () => void;
  hideScrollView?: boolean;
  containerStyle?: StyleProp<ViewStyle>;
  contentStyle?: StyleProp<ViewStyle>;
  footer?: ReactNode;
};

export const Modal = ({
  visible,
  onClose,
  children,
  title = '',
  avoidKeyboard = true,
  onBackButtonClick,
  hideScrollView = false,
  containerStyle,
  contentStyle,
  footer,
}: ModalProps) => {
  const renderHeader = () => {

    if (!title && !onClose && !onBackButtonClick) {return null;}

    return (
      <View style={[
        styles.header,
        !title && styles.headerNoTitle,
      ]}>
        <View style={styles.left}>
          {onBackButtonClick && (
            <TouchableOpacity
              onPress={onBackButtonClick}
              style={styles.iconButton}>
              <Text style={styles.iconText}>{'‹'}</Text>
            </TouchableOpacity>
          )}
          {title ? <Text style={styles.title}>{title}</Text> : null}
        </View>
        {onClose && (
          <TouchableOpacity
            activeOpacity={0.85}
            onPress={onClose}
            style={[
              globalStyles.shadowElevation,
              globalStyles.shadowProp,
              styles.iconButton,
            ]}>
            <Text style={styles.iconText}>{'×'}</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  };

  const ContentWrapper = hideScrollView ? View : ScrollView;

  return (
    <BaseModal
      transparent
      visible={visible}
      // animationType="fade"
      onRequestClose={onClose}
      statusBarTranslucent={false}>
      <View style={styles.overlay}>
        <TouchableOpacity
          activeOpacity={1}
          onPress={onClose}
          style={styles.backdrop}
        />
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.keyboardAvoidingView}
          enabled={avoidKeyboard}>
          <View style={[styles.container, containerStyle]}>
            {renderHeader()}
            <ContentWrapper
              style={[styles.content, contentStyle]}
              keyboardShouldPersistTaps="handled"
              showsVerticalScrollIndicator={false}>
              {children}
            </ContentWrapper>
            {footer && (
              <View style={styles.footer}>
                {footer}
              </View>
            )}
          </View>
        </KeyboardAvoidingView>
      </View>
    </BaseModal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
  },
  keyboardAvoidingView: {
    justifyContent: 'flex-end',
  },
  container: {
    backgroundColor: 'white',
    borderTopLeftRadius: ms(16),
    borderTopRightRadius: ms(16),
    overflow: 'hidden',
    maxHeight: '90%',
  },
  content: {
    paddingVertical: ms(16),
    minHeight: ms(120),
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ccc',
    paddingBottom: fontSz(12),
    marginBottom: fontSz(12),
    paddingHorizontal: ms(16),
    paddingVertical: ms(16),
  },
  headerNoTitle: {
    paddingVertical: 0,
    marginBottom: 0,
    borderBottomWidth: 0,
    paddingHorizontal: 0,
  },
  left: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconButton: {
    backgroundColor: Colors.white,
    height: ms(30),
    width: ms(30),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: ms(1000),
  },
  iconText: {
    fontSize: fontSz(24),
    color: '#333',
  },
  title: {
    fontSize: fontSz(16),
    fontWeight: '500',
    color: '#0a2540',
    marginLeft: 4,
  },
  footer: {
    backgroundColor: Colors.white,
    paddingHorizontal: ms(20),
    paddingVertical: ms(12),
    paddingBottom: ms(22),
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#ccc',
  },
});