import { FlatList, Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, Constants, GetDevice } from "../../utils";
import { useCallback, useContext, useState } from "react";
import MyDropdown from "../../Components/Dropdown";
import MyIcon from "../../Components/Icon";
import { useTranslation } from "react-i18next";
import MyResult from "../../Components/Result";
import { MyIconButton, MyTextButton } from "../../Components/Button";
import { useFocusEffect } from "@react-navigation/native";

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

  const [device, setDevice] = useState();

  const getSelectedDeviceSceneName = () => {
    const scenes = appContext.deviceScenes.find(
      (s) => s.sceneId === device.selectedScene
    );

    return scenes === undefined ? "None" : scenes.name;
  };

  useFocusEffect(
    useCallback(() => {
      setDevice(GetDevice(appContext.devices));

      if (device !== undefined) {
        if (device.selectedScene !== null) {
          navigation.setOptions({
            headerRight: () => (
              <MyIconButton
                iconName="pencil"
                iconSize={22}
                style={{ marginRight: 20 }}
                onPress={() =>
                  navigation.navigate("modalUpdateSceneName", {
                    deviceSelectedScene: device.selectedScene,
                    sceneName: getSelectedDeviceSceneName(),
                  })
                }
              />
            ),
          });
        }
      }
    }, [device])
  );

  if (device === undefined) return <></>;

  const getActionTypeIcon = (actionType) => {
    let iconName = "";

    switch (actionType) {
      case Constants.actionType.layers:
        iconName = "lightbulb-on-outline";
        break;
      case Constants.actionType.ambilight:
        iconName = "television-ambient-light";
        break;
      case Constants.actionType.motor:
        iconName = "axis-z-rotate-counterclockwise";
        break;
      default:
        iconName = "help";
        break;
    }

    return <MyIcon name={iconName} size={24} />;
  };

  const deviceSceneActions = appContext.deviceSceneActions.filter(
    (a) => a.sceneId === device.selectedScene
  );

  return (
    <>
      <Card>
        <MyDropdown
          label={t("screens.device.scenes.dropdownSceneSelection.label")}
          onPress={() =>
            navigation.navigate("modalChooseScene", {
              device: { selectedScene: device.selectedScene },
            })
          }
          selectedItemLabel={
            device.selectedScene === null
              ? t(
                  "screens.device.scenes.dropdownSceneSelection.noSceneSelected"
                )
              : getSelectedDeviceSceneName()
          }
        />
      </Card>

      {device.selectedScene === null ? (
        <MyResult
          text={t("screens.device.scenes.infoNoSceneSelected")}
          iconName={"selection-search"}
        />
      ) : (
        <View>
          {deviceSceneActions === undefined ||
          deviceSceneActions.length === 0 ? (
            <MyResult
              text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
              iconName={"selection-search"}
            />
          ) : (
            <FlatList
              scrollEnabled={false}
              data={deviceSceneActions}
              keyExtractor={(item) => item.actionId}
              renderItem={({ item }) => {
                console.log("item", item);

                return (
                  <Card cardBackgroundColor={"#e67e22"}>
                    <View
                      style={{
                        flexDirection: "row",
                        justifyContent: "space-between",
                      }}
                    >
                      {getActionTypeIcon(item.type)}
                      <View>
                        <Text>Layer 1 wird auf rot setzen</Text>
                        <Text>Animation In: Fade in</Text>
                        <Text>Animation out: Fade out</Text>
                      </View>
                      <TouchableOpacity
                        onPress={() =>
                          navigation.navigate("modalLayersEditAction", {
                            actionId: item.actionId,
                            deviceFirmwareVersion: device.firmware.version,
                          })
                        }
                      >
                        <MyIcon name="pencil" size={24} />
                      </TouchableOpacity>
                    </View>
                  </Card>
                );
              }}
            />
          )}

          <MyTextButton
            title={t("screens.device.scenes.buttonAddAction")}
            style={{ marginTop: 10 }}
            actionColor={
              deviceSceneActions === undefined ||
              deviceSceneActions.length === 0
            }
            onPress={() =>
              navigation.navigate("modalAddSceneAction", {
                deviceFirmwareVersion: device.firmware.version,
              })
            }
          />
        </View>
      )}
    </>
  );
}
