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

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

  const { device } = route.params;

  const deviceScenes = appContext.deviceScenes.filter(
    (s) => s.deviceId === AppSelectedUserDevice.current.id
  );

  return (
    <ModalContainer>
      {deviceScenes.length === 0 ? (
        <MyResult
          text={t("screens.device.scenes.modalChooseScene.noResult")}
          iconName={"selection-search"}
        />
      ) : (
        <FlatList
          data={deviceScenes}
          keyExtractor={(item) => item.sceneId}
          renderItem={({ item }) => (
            <MyPickerModalListItem
              itemName={item.name}
              itemSelected={device.selectedScene === item.sceneId}
              onPress={() => {
                navigation.goBack();

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

                  newArr[
                    arr.findIndex(
                      (d) => d.id === AppSelectedUserDevice.current.id
                    )
                  ].selectedScene = item.sceneId;

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

      <MyTextButton
        style={{ marginTop: 10 }}
        actionColor={!deviceScenes.length}
        onPress={() => navigation.navigate("modalCreateScene")}
        title={t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
      />
    </ModalContainer>
  );
}
