import { useContext, useState } from "react";
import { Image, View, Text, Alert } from "react-native";
import { AppContext, AppStyles } from "../../utils";
import SettingsView from "./settings";
import SceneView from "./scene";
import {
  MyDeviceTabButton,
  MyDeviceTabButtonContainer,
} 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,
      }}
    >
      <DeviceLivePreview />

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

      <View style={{ flex: 1 }}>
        <SelectedView />
      </View>
    </View>
  );
}

export function DeviceLivePreview() {
  const appContext = useContext(AppContext);

  return (
    <>
      {appContext.isUserDeveloperModeEnabled ? (
        <Image
          source={require("../../../assets/device.png")}
          style={[{ width: "100%" }, AppStyles.deviceLivePreview]}
          resizeMode="contain"
        />
      ) : (
        <View
          style={[
            {
              width: "100%",
              backgroundColor: "#ddd",
            },
            AppStyles.deviceLivePreview,
          ]}
        />
      )}
    </>
  );
}
