import { useContext } from "react";
import {
  AppContext,
  AppSelectedUserDevice,
  ModalContainer,
  NewDeviceScene,
} from "../../../../../utils";
import { FlatList } from "react-native";
import { MyPickerModalListItem } from "../../../../../Components/Modal";
import { useTranslation } from "react-i18next";

export default function CreateSceneModalContent({ navigation }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

  const options = [
    {
      id: 0,
      name: t("screens.device.scenes.modalCreateScene.options.emptyScene"),
    },
    {
      id: 1,
      name: t("screens.device.scenes.modalCreateScene.options.standardScene"),
    },
    {
      id: 2,
      name: t(
        "screens.device.scenes.modalCreateScene.options.copyExistingScene"
      ),
    },
  ];

  return (
    <ModalContainer withoutPadding>
      <FlatList
        data={options}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <MyPickerModalListItem
            itemName={item.name}
            disabled={item.id === 2}
            onPress={() => {
              if (item.id === 0 || item.id === 1) {
                const newDeviceScene = NewDeviceScene(
                  item.id === 0 ? "Leere Szene" : "Standard Szene"
                );

                appContext.setDeviceScenes((arr) => [...arr, newDeviceScene]);

                navigation.pop(2);

                appContext.setDevices((arr) => {
                  let newArr = [...arr];

                  const deviceIndex = newArr.findIndex(
                    (device) => device.id === AppSelectedUserDevice.current.id
                  );

                  if (deviceIndex !== -1) {
                    newArr[deviceIndex].selectedScene = newDeviceScene.sceneId;
                  }

                  return newArr;
                });
              } else {
                console.log("copy a scene");
              }
            }}
          />
        )}
      />
    </ModalContainer>
  );
}
