import React, { useState } from "react";
import {
  View,
  StyleSheet,
  ScrollView,
  Dimensions,
  Platform,
} from "react-native";
import {
  useNavigation,
  NavigationProp,
  NavigationContainer,
} from "@react-navigation/native";
import { SafeAreaView } from "react-native-safe-area-context";
import Header from "../components/header/Header";
import { MainMenu } from "@components/header/Menu";
import Footer from "../components/footer/Footer";

import ButtonFooter from "../components/footer/ButtonFooter";
var winWidth = Dimensions.get("window").width; //full width
const winHeight = Dimensions.get("window").height;

type Props = {
  children: React.ReactNode;
  activeTab: string;
};

const AppLayout = ({ children, activeTab }: Props) => {
  const navigation = useNavigation<NavigationProp<any>>();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <SafeAreaView style={styles.wrapper}>
      <Header toggleMenu={() => setIsMenuOpen(true)} />
      <MainMenu visible={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.scrollContainer}
        keyboardShouldPersistTaps="handled"
      >
        {children}
      </ScrollView>
      <Footer navigation={navigation} />
      <ButtonFooter navigation={navigation} activeTab={activeTab} />
    </SafeAreaView>
  );
};

export default AppLayout;

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: "#fff",
  },
  scroll: {
    flex: 1,
    ...Platform.select({
      web: { marginTop: 113 },
      default: { marginTop: 0 },
    }),
  },
  scrollWrapper: {
    flex: 1,
    overflow: "scroll",
  },
  scrollContainer: {
    flexGrow: 1,
  },
  webScrollArea: {
    flex: 1,
    overflow: "auto" as any,
  },
});
