import { useContext, useState } from "react";
import { Text, TouchableHighlight, View } from "react-native";
import MyButton from "../../../../../Components/Button";
import { useTranslation } from "react-i18next";
import {
  AppContext,
  AppSelectedUserDevice,
  Constants,
  GetDevice,
  ModalContainer,
  NewAction,
} from "../../../../../utils";

function Layer({ number, selected, onPress }) {
  return (
    <TouchableHighlight onPress={onPress} style={{ borderRadius: 10 }}>
      <View
        style={[
          {
            height: 150,
            width: 150,
            backgroundColor: "gray",
            borderRadius: 10,
          },
          selected && { borderColor: "#9b59b6", borderWidth: 6 },
        ]}
      >
        <View style={{ alignItems: "flex-end" }}>
          <View
            style={{
              marginTop: 6,
              marginRight: 6,
              backgroundColor: "#e67e22",
              paddingLeft: 6,
              paddingRight: 6,
              borderRadius: 10,
            }}
          >
            <Text>{number}</Text>
          </View>
        </View>
      </View>
    </TouchableHighlight>
  );
}

export default function LayerSelectionModalContent({ navigation, route }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  const { actionId, selectedLayers } = route.params;

  // The selected layers will be in the params if the user is changing the layers of an existing action
  const [selectedLayer, setSelectedLayer] = useState(
    selectedLayers === undefined ? [] : selectedLayers
  );

  const handleSelectLayerClick = (layerNumber) => {
    if (selectedLayer.includes(layerNumber)) {
      setSelectedLayer((sLayer) =>
        sLayer.filter((item) => item != layerNumber)
      );
    } else {
      setSelectedLayer((sLayer) => [...sLayer, layerNumber]);
    }
  };

  return (
    <ModalContainer>
      <View
        style={{
          flexDirection: "row",
          flexWrap: "wrap",
          gap: 14,
          justifyContent: "center",
        }}
      >
        {Array.from({ length: 4 }).map((_, i) => (
          <Layer
            key={i}
            number={i + 1}
            selected={selectedLayer.includes(i + 1)}
            onPress={() => handleSelectLayerClick(i + 1)}
          />
        ))}
      </View>

      <View style={{ alignItems: "center" }}>
        <MyButton
          title={
            actionId === undefined
              ? t("screens.device.scenes.buttonAddAction")
              : t("screens.device.scenes.buttonChangeLayers")
          }
          style={{ marginTop: 20, width: 180 }}
          disabled={selectedLayer.length === 0}
          onPress={() => {
            // The layers will be sorted in ascending order -> 1, 2, 3, 4
            const sortedSelectedLayers = selectedLayer.sort((a, b) => a - b);

            // New action will be created
            if (actionId === undefined) {
              const newAction = NewAction(
                GetDevice(appContext.devices).selectedScene,
                Constants.actionType.layers,
                { layers: sortedSelectedLayers }
              );

              appContext.setDeviceSceneActions((arr) => [...arr, newAction]);

              route.params["action"] = newAction;

              navigation.navigate(AppSelectedUserDevice.current.routeName);
              navigation.navigate("modalLightsEditAction", {
                ...route.params,
                actionType: Constants.actionType.layers,
              });
            } else {
              // user is editing the layers of an existing action

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

                const actionIndex = newArr.findIndex(
                  (item) => item.actionId === actionId
                );

                if (actionIndex !== -1) {
                  newArr[actionIndex].modeAdjustments.layers =
                    sortedSelectedLayers;
                }

                return newArr;
              });

              navigation.goBack();
            }
          }}
        />
      </View>
    </ModalContainer>
  );
}