import { View, Text, ViewProps } from "react-native-ui-lib";
import React, { ReactNode, useEffect, useState } from "react";
import { Dimensions, StyleSheet, useWindowDimensions } from "react-native";
import UsersList from "./UsersList";
import { ScrollView } from "react-native-gesture-handler";

interface TabletContainerProps extends ViewProps {
  children: ReactNode;
}

const TabletContainer: React.FC<TabletContainerProps> = ({
  children,
  ...props
}) => {
  const window = useWindowDimensions();
  const [containerWidth, setContainerWidth] = useState(Dimensions.get('window').width);
  const [containerHeight, setContainerHeight] = useState(Dimensions.get('window').height);

  // Update dimensions on mount and when window size changes
  useEffect(() => {
    const updateDimensions = () => {
      setContainerWidth(window.width);
      setContainerHeight(window.height);
    };

    updateDimensions();

    // Force a second update after a brief delay to handle any initial rendering issues
    const timer = setTimeout(updateDimensions, 100);

    return () => clearTimeout(timer);
  }, [window.width, window.height]);

  const styles = StyleSheet.create({
    container: {
      backgroundColor: "white",
      flex: 1,
      flexDirection: 'row',
      borderTopColor: "#a9a9a9",
      width: containerWidth,
      borderTopWidth: 1,
    },
    calendarContainer: {
      backgroundColor: "white",
      height: containerHeight,
      width: containerWidth * 0.89,
    },
    profilesContainer: {
      width: containerWidth * 0.11,
      height: containerHeight,
      borderLeftWidth: 1,
      borderLeftColor: "#a9a9a9",
      backgroundColor: "white",
    },
  });

  return (
    <View style={styles.container}>
      <View row>
        <View style={styles.calendarContainer}>{children}</View>
        <View style={styles.profilesContainer}>
          <ScrollView>
            <UsersList />
          </ScrollView>
        </View>
      </View>
    </View>
  );
};

export default TabletContainer;