import { useContext } from "react";
import { AppContext, Constants } from "../../../../utils";
import { MyTextInputModalContent } from "../../../../Components/Modal";
import { useTranslation } from "react-i18next";

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

  const { deviceSelectedScene, sceneName } = route.params;

  const updateSceneName = (newName) => {
    appContext.setDeviceScenes((arr) => {
      let newArr = [...arr];

      const foundSceneIndex = newArr.findIndex(
        (scene) => scene.sceneId === deviceSelectedScene
      );

      if (foundSceneIndex !== -1) {
        newArr[foundSceneIndex].name = newName;
      }

      return newArr;
    });
  };

  return (
    <MyTextInputModalContent
      navigation={navigation}
      textMaxLength={Constants.globals.max_scene_name_length}
      defaultValue={sceneName}
      textInputTitle={t("screens.device.scenes.modalUpdateSceneName.textTitle")}
      textInputDescription={t(
        "screens.device.scenes.modalUpdateSceneName.textDescription"
      )}
      onCheckIconPress={(newValue) => {
        updateSceneName(newValue);
      }}
      textOnSubmitEditing={(e) => updateSceneName(e.nativeEvent.text)}
    />
  );
}
