import React from "react";
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  Text,
} from "react-native";
import Modal from "react-native-modal";
import { SCREEN_WIDTH, SCREEN_HEIGHT } from "../common/Constants";
import { PrimaryButton, Heading } from "../common/ThemedComponents";
import Colors from "../common/Colors";
import { useIsFocused } from "@react-navigation/native";
import { translate } from "react-native-digitcamera/src/common/localize/i18n";
//images
const bulb = require("../common/Image/bulb.png");

const CustomModal = ({
  extraBottom,
  isVisible = false,
  onBackdropPress = () => {},
  onClose = () => {},
  minHeight,
  children,
  heading,
  containerStyle,
  scrollEnabled = true,
  isTranslate,
  headerImageVisible = true,
}) => {
  const focused = useIsFocused();

  React.useEffect(() => {
    if (!focused && isVisible) {
      onClose();
    }
  }, [focused]);
  let heightRatio = extraBottom ? 3.9 : 3.5;
  return (
    <Modal
      isVisible={isVisible}
      onBackdropPress={onBackdropPress}
      onBackButtonPress={onClose}
      useNativeDriver
      useNativeDriverForBackdrop
      hideModalContentWhileAnimating
      avoidKeyboard
      style={styles.bottomModal}
    >
      <View
        style={[
          styles.modalContent,
          { minHeight: minHeight ? null : 3.4 },
          containerStyle,
        ]}
      >
        <View style={styles.modalCloseView}>
          {/* {heading ? <Heading style={styles.modalHeading}>{isTranslate ? translate(heading) : heading}</Heading> : <View></View>} */}
          <View style={styles.closeButtonContainer}>
            <TouchableOpacity onPress={onClose}>
              {headerImageVisible ? (
                <Image
                  source={bulb}
                  resizeMode="contain"
                  style={styles.closeButton}
                />
              ) : null}
            </TouchableOpacity>
          </View>
          <View style={styles.modalHeading}>
            <Text style={styles.headingText}>{translate(heading)}</Text>
          </View>
        </View>
        {scrollEnabled ? (
          <ScrollView keyboardShouldPersistTaps="handled">
            <View style={{ flex: 1 }}>{children}</View>
          </ScrollView>
        ) : (
          <View style={{ flex: 1 }}>{children}</View>
        )}
      </View>
    </Modal>
  );
};

export default CustomModal;

const styles = StyleSheet.create({
  closeButtonContainer: {
    width: 20,
    height: 20,
    flex: 0.1,
  },
  closeButton: {
    width: 14,
    height: 20,
    marginTop: 15,
    marginRight: 17,
    height: 30,
  },
  bottomModal: {
    justifyContent: "flex-end",
    margin: 0,
  },
  modalCloseView: {
    flex: 1,
    flexDirection: "row",
    marginLeft: 24,
    marginRight: 15,
    marginTop: 15,
  },
  modalContent: {
    // minHeight: SCREEN_HEIGHT / 3.5,
    maxHeight: SCREEN_HEIGHT - 100,
    backgroundColor: "#FFFFFF",
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
    borderColor: "rgba(0, 0, 0, 0.1)",
  },
  modalHeading: {
    marginTop: 15,
    fontFamily: "Muli-Black",
    fontSize: 18,
    color: Colors.darkBlack,
    flex: 0.9,
    height: 30,
  },
  headingText: {
    fontSize: 20,
    fontFamily: "Muli-Black",
  },
});
