import { useContext } from "react";
import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native";
import { AppContext, AppStyles, ModalContainer } from "../../../../utils";
import MyIcon from "../../../../Components/Icon";
import { Divider } from "../../../../Components/Divider";
import { useTranslation } from "react-i18next";
import MyTag from "../../../../Components/Tag";

function Action({
  text,
  iconName,
  imageSource,
  onPress,
  deviceFirmwareVersion,
  supportedFirmwareVersions,
}) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  const deviceFirmwareVersionSupported = supportedFirmwareVersions.includes(
    deviceFirmwareVersion
  );

  const color = deviceFirmwareVersionSupported
    ? appContext.appTheme.text
    : appContext.appTheme.textSecondary;

  return (
    <>
      <TouchableOpacity
        style={{ marginLeft: 10, marginRight: 10 }}
        onPress={onPress}
        disabled={!deviceFirmwareVersionSupported}
      >
        <View
          style={[
            {
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "wrap",
            },
            imageSource !== undefined && { marginBottom: 4 },
          ]}
        >
          <MyIcon name={iconName} size={24} color={color} />
          <Text
            style={[AppStyles.typography16, { color: color, marginLeft: 6 }]}
          >
            {text}
          </Text>

          {!deviceFirmwareVersionSupported && (
            <MyTag
              color={appContext.appTheme.tag.red}
              text={t("common.infoFirmwareUpdateRequired")}
            />
          )}
        </View>
        {imageSource !== undefined && (
          <Image source={imageSource} style={{ height: 150, width: 150 }} />
        )}
      </TouchableOpacity>
      <Divider />
    </>
  );
}

export default function AddSceneActionModalContent({ navigation, route }) {
  const { t } = useTranslation();

  const deviceFirmwareVersion = route.params.deviceFirmwareVersion;

  // TODO: show only actions by device model

  return (
    <ScrollView>
      <ModalContainer>
        <Action
          text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
          iconName="lightbulb-on-outline"
          imageSource={require("../../../../../assets/layers.gif")}
          onPress={() => navigation.navigate("modalLayerSection", route.params)}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
          iconName="axis-z-rotate-counterclockwise"
          imageSource={require("../../../../../assets/motor.gif")}
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t(
            "screens.device.scenes.modalAddSceneAction.actions.ambilight"
          )}
          iconName="television-ambient-light"
          imageSource={require("../../../../../assets/ambilight.gif")}
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t(
            "screens.device.scenes.modalAddSceneAction.actions.waitXSeconds"
          )}
          iconName="timer-sand"
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t(
            "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
          )}
          iconName="clock-time-eight-outline"
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
          iconName="pause-octagon-outline"
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t(
            "screens.device.scenes.modalAddSceneAction.actions.timeControl"
          )}
          iconName="timer-cog"
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t(
            "screens.device.scenes.modalAddSceneAction.actions.waitForConfirmationWithKey"
          )}
          iconName="gesture-tap-button"
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.0"]}
        />

        <Action
          text={t(
            "screens.device.scenes.modalAddSceneAction.actions.jumpToScene"
          )}
          iconName="debug-step-over"
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.0"]}
        />
      </ModalContainer>
    </ScrollView>
  );
}
