import { Motion } from "@legendapp/motion";
import React, { createContext, useRef, useState } from "react";
import { TouchableOpacity, View } from "react-native";

import { Palette } from "../styles";
import { mainBorderRadius } from "../styles/Style";

export const BottomSheetContext = createContext();

export default ({ children }) => {
  const [showSheet, setShowSheet] = useState(false);
  const [sheetContent, setSheetContent] = useState(null);

  const bottomSheetRef = useRef();

  return (
    <BottomSheetContext.Provider
      value={{ showSheet, setShowSheet, setSheetContent }}
    >
      {children}

      {showSheet && (
        <Motion.View
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.9, opacity: 0 }}
          style={{
            position: "fixed",
            right: 0,
            top: 0,
            left: 0,
            bottom: 0,
            flex: 1,
            zIndex: 1000000,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <TouchableOpacity
            onPress={() => setShowSheet(false)}
            ref={bottomSheetRef}
            style={{
              position: "absolute",
              right: 0,
              top: 0,
              left: 0,
              bottom: 0,
              flex: 1,
              backgroundColor: "rgba(0,0,0,0.4)",
            }}
          />

          <View
            style={{
              width: "70%",
              height: "auto",
              maxWidth: 500,
              maxHeight: "60vh",
              minHeight: 400,
              alignSelf: "center",
              backgroundColor: Palette.lightPurple,
              position: "absolute",
              overflow: "scroll",
              borderRadius: mainBorderRadius,
            }}
          >
            {sheetContent}
          </View>
        </Motion.View>
      )}
    </BottomSheetContext.Provider>
  );
};