import React, { useState, useEffect } from "react";
import {
  View,
  StyleSheet,
  Dimensions,
  ScrollView,
  SafeAreaView,
  StatusBar,
  LayoutAnimation,
  Appearance,
  Text,
  Platform,
} from "react-native";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";

//components
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import { Video } from "expo-av";
import * as ScreenOrientation from "expo-screen-orientation";
import Season from "./components/Season";
import Divider from "../../components/Divider";

import tw from "tailwind-rn";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";

const ios = Platform.OS === "ios";

function VideoDisplay({ route, mobile }) {
  const colorScheme = Appearance.getColorScheme();
  const video = React.useRef(null);
  const [width, setWidth] = useState(Dimensions.get("window").width);
  const [status, setStatus] = React.useState({});
  const [position, setPosition] = useState("100%");

  const setBoxPosition = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setPosition(position === "100%" ? "0%" : "100%");
  };

  function setOrientation() {
    if (Dimensions.get("window").height > Dimensions.get("window").width) {
      //Device is in portrait mode, rotate to landscape mode.
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
    } else {
      //Device is in landscape mode, rotate to portrait mode.
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
    }
  }

  return (
    <SafeAreaView
      style={{
        paddingTop: !ios ? StatusBar.currentHeight : 0,
        position: "relative",
      }}
    >
      <Navbar
        setBoxPosition={setBoxPosition}
        headerOptions={{
          logo: false,
          menu: true,
          hamburgerMenu: false,
          title: "",
          bookmark: false,
          qr: false,
          back: true,
        }}
      />
      <Drawer setBoxPosition={setBoxPosition} position={position} />
      <ScrollView
        contentContainerStyle={styles.contentContainerStyle}
        style={styles.container}
        onLayout={() => setWidth(Dimensions.get("window").width)}
      >
        {!mobile && <View style={tw("mt-5")}></View>}

        <View style={tw("flex ")}>
          <Video
            ref={video}
            style={{ width: "100%", height: (width * 9) / 16 - 16 }}
            source={{
              uri: `https://dnvn.ir/api/v1/file/${route.params.unit?.fileIds}`,
            }}
            useNativeControls
            resizeMode="cover"
            onFullscreenUpdate={setOrientation}
            isLooping
            onPlaybackStatusUpdate={(status) => setStatus(() => status)}
          />
          <Text
            style={{
              fontSize: fontSize.xl,
              fontFamily: "bold",
              marginTop: mobile ? 8 : 12,
              color: Colors.theme1[colorScheme].gray20,
              textAlign: ios ? "right" : "auto",
            }}
          >
            {route.params.unit?.name}
          </Text>
          <View
            style={[
              tw("flex  flex-1 justify-between"),
              {
                paddingRight: 10,
              },
            ]}
          >
            <Divider type={"vertical"} />
          </View>
          <Season
            season={route.params.season}
            activeUnit={route.params.unit}
            name={route.params.name}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  contentContainerStyle: {
    paddingBottom: 100,
  },
  container: {
    backgroundColor: "white",
    flexDirection: "column",
    paddingVertical: 5,
    paddingHorizontal: 16,
  },
});

const mapStateToProps = (state) => ({
  grades: state.publicApi.grades,
  mobile: state.publicApi.mobile,
});

export default connect(mapStateToProps)(VideoDisplay);