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

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 (
    <>
      <MyPressable onPress={onPress} disabled={!deviceFirmwareVersionSupported}>
        <View
          style={[
            {
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "wrap",
              padding: 12,
            },
            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, marginLeft: 12 }}
          />
        )}
      </MyPressable>

      <Divider withoutMarginVertical />
    </>
  );
}

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

  const deviceFirmwareVersion = route.params.deviceFirmwareVersion;

  // TODO: show only actions by device model

  return (
    <ScrollView>
      <ModalContainer withoutPadding>
        <Action
          text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
          iconName={ActionTypeIconName(Constants.actionType.layers)}
          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={ActionTypeIconName(Constants.actionType.motor)}
          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={ActionTypeIconName(Constants.actionType.ambilight)}
          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={ActionTypeIconName(Constants.actionType.waitXSeconds)}
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t(
            "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
          )}
          iconName={ActionTypeIconName(Constants.actionType.waitUntilTimeX)}
          onPress={() => console.log("pressed action")}
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

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

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

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

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