import { Image, ScrollView, Text, View } from "react-native";
import {
  AppContext,
  AppSelectedUserDevice,
  AppStyles,
  Constants,
  GetDevice,
  ModalContainer,
  NewAction,
} 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";
import { useContext } from "react";

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 appContext = useContext(AppContext);
  const { t } = useTranslation();

  const deviceFirmwareVersion = route.params.deviceFirmwareVersion;

  // TODO: show only actions by device model

  // this code is also in ./LayerSelection/index.js
  const handleCreateAction = (actionType, modeAdjustments, navigateTo) => {
    const newAction = NewAction(
      GetDevice(appContext.devices).selectedScene,
      actionType,
      modeAdjustments
    );

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

    route.params["action"] = newAction;

    if (actionType === Constants.actionType.ambilight) {
      route.params["actionType"] = Constants.actionType.ambilight;
    }

    navigation.navigate(AppSelectedUserDevice.current.routeName);
    navigation.navigate(navigateTo, route.params);
  };

  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("modalLayerSelection", route.params)
          }
          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={() =>
            handleCreateAction(
              Constants.actionType.ambilight,
              {},
              "modalLightsEditAction"
            )
          }
          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={() =>
            handleCreateAction(
              Constants.actionType.motor,
              {},
              "modalMotorEditAction"
            )
          }
          deviceFirmwareVersion={deviceFirmwareVersion}
          supportedFirmwareVersions={["1.0.1"]}
        />

        <Action
          text={t("screens.device.scenes.modalAddSceneAction.actions.wait")}
          iconName={ActionTypeIconName(Constants.actionType.wait)}
          onPress={() =>
            handleCreateAction(
              Constants.actionType.wait,
              { hours: 0, minutes: 0, seconds: 0 },
              "modalWaitEditAction"
            )
          }
          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.0"]}
        />

        <Action
          text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
          iconName={ActionTypeIconName(Constants.actionType.stop)}
          onPress={() =>
            handleCreateAction(
              Constants.actionType.stop,
              {},
              "modalStopEditAction"
            )
          }
          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.0"]}
        />

        <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>
  );
}
