import React from "react";
import { StyleSheet, TouchableOpacity, Easing, View } from "react-native";

import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Components/AnimatedInOut";
import { dismissModal } from "@applicaster/zapp-react-native-utils/modalState";

type Props = {
  overlayColor: string;
  closeToast: () => void;
  visible: boolean;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

const duration = 400;
const easing = Easing.in(Easing.bezier(0.25, 0.1, 0.25, 1.0));
const delay = 0;

const fadeIn = (animatedValue, from, to) =>
  animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [from, to],
  });

const fadeInAnimation = {
  duration,
  easing,
  styles: (animatedValue) => ({
    opacity: fadeIn(animatedValue, 0, 1),
  }),
  delay,
};

const animationConfig = {
  in: fadeInAnimation,
  out: {
    ...fadeInAnimation,
    onAnimationEnd: dismissModal,
  },
};

export function Overlay(props: Props) {
  return (
    <AnimatedInOut
      visible={props.visible}
      animationConfig={animationConfig}
      staticStyles={styles.container}
    >
      <TouchableOpacity
        activeOpacity={1}
        style={[
          styles.container,
          {
            backgroundColor: props?.overlayColor,
          },
        ]}
        onPress={() => props?.closeToast?.()}
      >
        <View />
      </TouchableOpacity>
    </AnimatedInOut>
  );
}