import { useContext, useState } from "react";
import { Image, ScrollView, StyleSheet, View, Text, Alert } from "react-native";
import { AppContext } from "../../utils";
import SettingsView from "./settings";
import SceneView from "./scene";
import {
  MyDeviceTabButton,
  topFirst,
  topSecond,
  topThird,
} from "./deviceTabButton";

export default function DeviceScreen({ navigation }) {
  const appContext = useContext(AppContext);
  const [selectedView, setSelectedView] = useState(2);

  const SelectedView = () => {
    switch (selectedView) {
      case 0:
        return <SettingsView navigation={navigation} />;
      case 2:
        return <SceneView navigation={navigation} />;
      default:
        <Text>Not found</Text>;
    }
  };

  const getIconColor = (selectedViewNumber) => {
    return selectedView === selectedViewNumber
      ? appContext.appTheme.colors.primary
      : appContext.appTheme.icon;
  };

  return (
    <View
      style={{
        height: "100%",
        backgroundColor: appContext.appTheme.backgroundColor,
      }}
    >
      {appContext.isUserDeveloperModeEnabled ? (
        <Image
          source={require("../../../assets/device.png")}
          style={styles.image}
          resizeMode="contain"
        />
      ) : (
        <>
          {selectedView !== 4 && (
            <View style={[styles.image, { backgroundColor: "#ddd" }]} />
          )}
        </>
      )}

      <MyDeviceTabButton
        iconName={"cog-outline"}
        selectedViewNumber={0}
        top={topFirst}
        iconColor={getIconColor(0)}
        onPress={() => setSelectedView(0)}
      />
      <MyDeviceTabButton
        iconName={"rotate-3d-variant"}
        selectedViewNumber={1}
        top={topSecond}
        iconColor={getIconColor(1)}
        onPress={() => {
          console.log("rotate");
          Alert.alert("Rotate device", "Soon the device will turn 180 degrees");
        }}
      />
      <MyDeviceTabButton
        iconName={"group"}
        selectedViewNumber={2}
        top={topThird}
        iconColor={getIconColor(2)}
        onPress={() => setSelectedView(2)}
      />

      <ScrollView style={{ height: "100%" }}>
        <SelectedView />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#2e2e30",
  },
  scrollView: {
    width: "100%",
    padding: 20,
  },
  image: {
    width: "100%",
    height: 250,
  },
});
