import { useContext, useState } from "react";
import {
  Image,
  ScrollView,
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  ImageBackground,
} from "react-native";
import { AppContext } from "../../utils";
import MyIcon from "../../Components/Icon";
import SettingsView from "./settings";
import SceneView from "./scene";

const spaceToSide = 10; // left and right
const top = 35;
const spaceBetweenButtons = 60;

const topFirst = top;
const topSecond = top + spaceBetweenButtons;
const topThird = top + 2 * spaceBetweenButtons;

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

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

  const MyButton = ({ selectedViewNumber, top, left, space, iconName }) => {
    const TouchComponent =
      appContext.appColorScheme === "dark"
        ? TouchableHighlight
        : TouchableOpacity;

    return (
      <TouchComponent
        onPress={() => setSelectedView(selectedViewNumber)}
        style={[
          {
            position: "absolute",
            backgroundColor: appContext.appTheme.card.backgroundColor,
            borderRadius: 10,
            padding: 8,
          },
          { top: top },
          left === true ? { left: space } : { right: space },
        ]}
      >
        <MyIcon
          name={iconName}
          size={30}
          color={
            selectedView === selectedViewNumber
              ? appContext.appTheme.colors.primary
              : appContext.appTheme.icon
          }
        />
      </TouchComponent>
    );
  };

  return (
    <View
      style={{
        height: "100%",
        backgroundColor: appContext.appTheme.backgroundColor,
      }}
    >
      {selectedView === 4 && (
        <View>
          <ImageBackground
            source={require("../../../assets/image19.png")}
            resizeMode="contain"
            style={{ height: 250 }}
          >
            <DeviceLedsColor />
          </ImageBackground>
        </View>
      )}

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

      <MyButton
        iconName={"cog-outline"}
        left={false}
        selectedViewNumber={0}
        space={spaceToSide}
        top={topFirst}
      />
      <MyButton
        iconName={"rotate-3d-variant"}
        left={false}
        selectedViewNumber={1}
        space={spaceToSide}
        top={topSecond}
      />
      <MyButton
        iconName={"group"}
        left={false}
        selectedViewNumber={2}
        space={spaceToSide}
        top={topThird}
      />

      <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,
  },
});
