import { useContext } from "react";
import { FlatList, Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, AppStyles, Constants, ModalContainer } from "../../utils";
import { Divider } from "../../Components/Divider";
import { useTranslation } from "react-i18next";
import MySwitch from "../../Components/Switch";
import { MyPickerModalListItem } from "../../Components/Modal";

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

  return (
    <View
      style={{
        height: "100%",
        backgroundColor: appContext.appTheme.backgroundColor,
      }}
    >
      <Card cardTopicText={t("screens.settings.settingsCardTitle")}>
        <TouchableOpacity
          onPress={() => navigation.navigate("modalSettingsAppLanguage")}
          style={{ marginBottom: 6 }}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
              paddingBottom: 4,
            }}
          >
            <Text
              style={[
                AppStyles.typography14,
                { color: appContext.appTheme.text },
              ]}
            >
              {t("screens.settings.languageText")}
            </Text>
            <Text style={{ color: appContext.appTheme.colors.primary }}>
              {
                Constants.languages.find(
                  (language) => language.name === appContext.appLanguage
                ).label
              }
            </Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => navigation.navigate("modalSettingsAppColorScheme")}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
              paddingTop: 4,
              paddingBottom: 4,
            }}
          >
            <Text
              style={[
                AppStyles.typography14,
                { color: appContext.appTheme.text },
              ]}
            >
              {t("screens.settings.appColorSchemeText")}
            </Text>
            <Text style={{ color: appContext.appTheme.colors.primary }}>
              {appContext.appColorScheme === "auto"
                ? t("screens.settings.appColorSchemePicker.auto")
                : appContext.appColorScheme === "dark"
                ? t("screens.settings.appColorSchemePicker.dark")
                : t("screens.settings.appColorSchemePicker.light")}
            </Text>
          </View>
        </TouchableOpacity>

        <Divider />
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <View style={{ width: "80%" }}>
            <Text
              style={[
                AppStyles.typography16,
                { color: appContext.appTheme.text },
              ]}
            >
              {t("screens.settings.expertModeTitle")}
            </Text>
            <Text
              style={[
                AppStyles.typography14,
                { color: appContext.appTheme.textSecondary },
              ]}
            >
              {t("screens.settings.expertModeDescription")}
            </Text>
          </View>
          <MySwitch
            value={appContext.isUserExpertModeEnabled}
            onValueChange={(e) => appContext.setIsUserExpertModeEnabled(e)}
          />
        </View>
      </Card>

      <Card>
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Text style={{ color: appContext.appTheme.text }}>
            Developer Mode
          </Text>
          <MySwitch
            value={appContext.isUserDeveloperModeEnabled}
            onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
          />
        </View>
      </Card>
    </View>
  );
}

export 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>
  );
}

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

  const items = [
    {
      label: t("screens.settings.appColorSchemePicker.auto"),
      onPress: () => appContext.setAppColorScheme("auto"),
      selected: appContext.appColorScheme === "auto",
    },
    {
      label: t("screens.settings.appColorSchemePicker.dark"),
      onPress: () => appContext.setAppColorScheme("dark"),
      selected: appContext.appColorScheme === "dark",
    },
    {
      label: t("screens.settings.appColorSchemePicker.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>
  );
}
