import { lazy, useContext, useState } from "react";
import {
  Image,
  ScrollView,
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  Dimensions,
  Platform,
  ImageBackground,
} from "react-native";
import LightView from "./light";
import { AppContext } from "../../utils";
import MyIcon from "../../Components/Icon";

const MotorView = lazy(() => import("./motor"));
const SettingsView = lazy(() => import("./settings"));
const ColorScenesView = lazy(() => import("./colorScenes"));

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

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

const windowDimensions = Dimensions.get("window");

let data = [];

const ledLines = 4;
const ledsPerLine = 16;

const deviceLeds = ledLines * ledsPerLine;

for (let i = 0; i < deviceLeds; i++) {
  data.push("lime");
}

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

  console.log(
    "wD",
    Platform.OS,
    windowDimensions.width,
    windowDimensions.width / 16
  );

  const SelectedView = () => {
    switch (selectedView) {
      case 0:
        return <LightView />;
      case 2:
        return <MotorView />;
      case 3:
        return <SettingsView />;
      case 4:
        return <ColorScenesView />;
      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>
    );
  };

  const DeviceLedsColor = ({ style }) => {
    /*
    <Leds style={{ top: 118, right: "8%" }} />
    <Leds style={{ top: 119, right: "8%" }} />
    <Leds style={{ top: 120, right: "8%" }} />
    <Leds style={{ top: 121, right: "8%" }} />
    */

    let elements = [];
    let test = 400;

    for (let l = 0; l < ledLines; l++) {
      let left = 0;
      let ledsElements = [];

      console.log("l", l);

      for (let p = 0; p < ledsPerLine; p++) {
        left = left + 1.5;

        ledsElements.push(
          <View
            key={`${l}-${p}`}
            style={{
              width: 0.1 * (test / 16),
              height: 0.1 * (test / 16),
              backgroundColor: "lime",
              borderRadius: 0.5,
              left: l,
              marginRight:
                windowDimensions.width > 360
                  ? 0.27 * (test / 16)
                  : 0.26 * (test / 16),
            }}
          />
        );
      }

      elements.push(
        <View
          key={`v-${l}`}
          style={{
            flexDirection: "row",
            justifyContent: "center",
            top: 118 + l,
            right: "8%",
          }}
        >
          {ledsElements}
        </View>
      );
    }

    /*
    for (let i = 0; i < 16; i++) {
      l = l + 1.5;

      elements.push(
        <View
          key={i}
          style={{
            width: 0.1 * (test / 16),
            height: 0.1 * (test / 16),
            backgroundColor: "lime",
            borderRadius: 0.5,
            left: l,
            marginRight:
              windowDimensions.width > 360
                ? 0.27 * (test / 16)
                : 0.26 * (test / 16),
          }}
        />
      );
    }*/

    return <>{elements}</>;
  };

  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={"lightbulb-on-outline"}
        left
        selectedViewNumber={0}
        space={spaceToSide}
        top={topFirst}
      />
      <MyButton
        iconName={"television-ambient-light"}
        left
        selectedViewNumber={1}
        space={spaceToSide}
        top={topSecond}
      />
      <MyButton
        iconName={"axis-z-rotate-counterclockwise"}
        left
        selectedViewNumber={2}
        space={spaceToSide}
        top={topThird}
      />

      <MyButton
        iconName={"cog-outline"}
        left={false}
        selectedViewNumber={3}
        space={spaceToSide}
        top={topFirst}
      />
      <MyButton
        iconName={"palette-outline"}
        left={false}
        selectedViewNumber={4}
        space={spaceToSide}
        top={topSecond}
      />
      <MyButton
        iconName={"rotate-3d-variant"}
        left={false}
        selectedViewNumber={5}
        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,
  },
});