import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, StatusBar, Dimensions } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#011",
  },
  text: {
    color: "#FFF",
    fontSize: 24,
  },
});

export default function App() {
  const [orientation, setOrientation] = useState("portrait");

  //controlling the orientation change
  useEffect(() => {
    const subscription = Dimensions.addEventListener("change", () => {
      const { width, height } = Dimensions.get("window");
      let newOrientation = width > height ? "landscape" : "portrait";
      setOrientation(newOrientation);
    });
    //this replaces the dependencies array. Saw this on RN docs
    return () => subscription?.remove();
  });

  //portrait view (default)
  function renderPortrait() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>This is portrait text</Text>
      </View>
    );
  }

  //landscape view with lime bg just to show the difference.
  function renderLandscape() {
    return (
      <View style={[styles.container, { backgroundColor: "lime" }]}>
        <Text style={styles.text}>This is landscape text</Text>
      </View>
    );
  }

  //view variable
  let view = orientation === "portrait" ? renderPortrait() : renderLandscape();

  return (
    <View style={{ flex: 1 }}>
      <StatusBar hidden />
      {view}
    </View>
  );
}