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

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

  return (
    <MyTextInputModalContent
      navigation={navigation}
      textMaxLength={Constants.globals.max_device_name_length}
      defaultValue={route.params.displayName}
      onCheckIconPress={(newDeviceDisplayName) => {
        appContext.setDevices((arr) => {
          let newArr = [...arr];

          const foundIndex = newArr.findIndex((d) => d.id === route.params.id);

          if (foundIndex !== -1) {
            newArr[foundIndex].displayName = newDeviceDisplayName;
          }

          return newArr;
        });
      }}
      textInputTitle={t(
        "screens.device.settings.modalSettingsChangeDeviceDisplayName.textTitle"
      )}
      textInputDescription={t(
        "screens.device.settings.modalSettingsChangeDeviceDisplayName.textDescription"
      )}
    />
  );
}
