import {  View } from "react-native";
import Card from "../../Components/Card";
import MyIcon from "../../Components/Icon";
import { useContext } from "react";
import { AppContext } from "../../utils";
import { TouchableOpacity } from "react-native-gesture-handler";
import MyColorPicker from "../../Components/ColorPicker";

export default function ColorScenesView({
  deviceLedsColors,
  setDeviceLedsColor,
  selectedDeviceLed,
  setSelectedDeviceLed,
}) {
  const appContext = useContext(AppContext);

  return (
    <Card>
      <View style={{ flexDirection: "row" }}>
        <TouchableOpacity
          onPress={() => {
            console.log("up");

            setDeviceLedsColor((arr) => {
              const newArr = [...arr];

              newArr[16] = "red";

              return newArr;
            });
          }}
        >
          <MyIcon
            name="arrow-up-bold-box"
            size={36}
            color={appContext.appTheme.icon}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => console.log("down")}>
          <MyIcon
            name="arrow-down-bold-box"
            size={36}
            color={appContext.appTheme.icon}
          />
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            console.log("left", selectedDeviceLed);

            if (selectedDeviceLed > 0) {
              setSelectedDeviceLed((prev) => (prev = prev - 1));
            }
          }}
        >
          <MyIcon
            name="arrow-left-bold-box"
            size={36}
            color={appContext.appTheme.icon}
          />
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            console.log("right");
            setSelectedDeviceLed((prev) => (prev = prev + 1));

            console.log("sel", selectedDeviceLed);
          }}
        >
          <MyIcon
            name="arrow-right-bold-box"
            size={36}
            color={appContext.appTheme.icon}
          />
        </TouchableOpacity>
      </View>
    </Card>
  );
}
