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

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

  const items = [
    {
      label: t("screens.settings.cardGeneral.modalAppColorSchemePicker.auto"),
      onPress: () => appContext.setAppColorScheme("auto"),
      selected: appContext.appColorScheme === "auto",
    },
    {
      label: t("screens.settings.cardGeneral.modalAppColorSchemePicker.dark"),
      onPress: () => appContext.setAppColorScheme("dark"),
      selected: appContext.appColorScheme === "dark",
    },
    {
      label: t("screens.settings.cardGeneral.modalAppColorSchemePicker.light"),
      onPress: () => appContext.setAppColorScheme("light"),
      selected: appContext.appColorScheme === "light",
    },
  ];

  return (
    <ModalContainer withoutPadding>
      <FlatList
        data={items}
        renderItem={({ item, index }) => (
          <MyPickerModalListItem
            key={index}
            itemName={item.label}
            itemSelected={item.selected}
            onPress={() => {
              item.onPress();
              navigation.goBack();
            }}
          />
        )}
      />
    </ModalContainer>
  );
}
