import { useContext, useState } from "react";
import { FlatList, Text, TouchableOpacity } from "react-native";
import { AppContext, AppStyles, DevDeviceId } from "../../../../utils";
import { Divider } from "../../../../Components/Divider";
import { View } from "react-native";
import MyIcon from "../../../../Components/Icon";
import { MyPickerModalListItem } from "../../../../Components/Modal";

export default function ChooseSceneModalContent({ openCreateSceneModal }) {
  const appContext = useContext(AppContext);

  const device = appContext.devices.find((device) => device.id === DevDeviceId);

  return (
    <>
      <FlatList
        data={device.scenes}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <MyPickerModalListItem
            itemName={item.name}
            itemSelected={device.selectedScene === item.id}
            onPress={() => {
              appContext.setDevices((arr) => {
                const newArr = [...arr];

                newArr[
                  arr.findIndex((d) => d.id === DevDeviceId)
                ].selectedScene = item.id;

                return newArr;
              });
            }}
          />
        )}
      />

      <TouchableOpacity
        style={{
          flexDirection: "row",
          justifyContent: "center",
          alignItems: "center",
          marginTop: 10,
        }}
        onPress={openCreateSceneModal}
      >
        <MyIcon
          name="plus-circle-outline"
          color={appContext.appTheme.textSecondary}
          size={24}
          style={{ marginRight: 10 }}
        />
        <Text
          style={[
            AppStyles.typography16,
            { color: appContext.appTheme.textSecondary },
          ]}
        >
          Neue Szene erstellen
        </Text>
      </TouchableOpacity>
    </>
  );
}
