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

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

  return (
    <>
      <TouchableOpacity
        style={{ marginLeft: 10, marginRight: 10 }}
        onPress={onPress}
      >
        <View
          style={[
            {
              flexDirection: "row",
              alignItems: "center",
            },
            imageSource !== undefined && { marginBottom: 4 },
          ]}
        >
          <MyIcon name={iconName} size={24} />
          <Text
            style={[
              AppStyles.typography16,
              { color: appContext.appTheme.text, marginLeft: 6 },
            ]}
          >
            {text}
          </Text>
        </View>
        {imageSource !== undefined && (
          <Image source={imageSource} style={{ height: 150, width: 150 }} />
        )}
      </TouchableOpacity>
      <Divider />
    </>
  );
}

export default function AddSceneActionModalContent({
  openLayerSelectionModal,
}) {
  return (
    <>
      <Action
        text="Ebenen"
        iconName="lightbulb-on-outline"
        imageSource={require("../../../../../assets/layers.gif")}
        onPress={openLayerSelectionModal}
      />

      <Action
        text="Motor"
        iconName="axis-z-rotate-counterclockwise"
        imageSource={require("../../../../../assets/motor.gif")}
        onPress={() => console.log("pressed action")}
      />

      <Action
        text="Ambilight"
        iconName="television-ambient-light"
        imageSource={require("../../../../../assets/ambilight.gif")}
        onPress={() => console.log("pressed action")}
      />

      <Action
        text="Warten"
        iconName="timer-sand"
        onPress={() => console.log("pressed action")}
      />

      <Action
        text="Stop"
        iconName="pause-octagon-outline"
        onPress={() => console.log("pressed action")}
      />

      <Action
        text="Zeitsteuerung"
        iconName="timer-cog"
        onPress={() => console.log("pressed action")}
      />
    </>
  );
}
