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

export default function SettingsAppLanguageModalContent({ navigation }) {
  const appContext = useContext(AppContext);

  return (
    <ModalContainer withoutPadding>
      <FlatList
        data={Constants.languages}
        renderItem={({ item, index }) => (
          <MyPickerModalListItem
            key={index}
            itemName={item.label}
            onPress={() => {
              appContext.setAppLanguage(item.name);
              navigation.goBack();
            }}
            itemSelected={appContext.appLanguage === item.name}
          />
        )}
      />
    </ModalContainer>
  );
}
