import { useContext } from "react";
import { Alert, Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, AppStyles, Constants } from "../../utils";
import { Divider } from "../../Components/Divider";
import { useTranslation } from "react-i18next";
import MySwitch from "../../Components/Switch";
import MyIcon from "../../Components/Icon";

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.cardGeneral.cardTitle")}
        contentPaddingTop={10}
        contentPaddingBottom={10}
      >
        <SettingComponent
          appContext={appContext}
          text={t("screens.settings.cardGeneral.languageText")}
          onPress={() => navigation.navigate("modalSettingsAppLanguage")}
          rightComponent={
            <Text style={{ color: appContext.appTheme.colors.primary }}>
              {
                Constants.languages.find(
                  (language) => language.name === appContext.appLanguage
                ).label
              }
            </Text>
          }
        />

        <Divider withoutMarginVertical style={{ marginVertical: 2 }} />

        <SettingComponent
          appContext={appContext}
          text={t("screens.settings.cardGeneral.appColorSchemeText")}
          onPress={() => navigation.navigate("modalSettingsAppColorScheme")}
          rightComponent={
            <Text style={{ color: appContext.appTheme.colors.primary }}>
              {appContext.appColorScheme === "auto"
                ? t(
                    "screens.settings.cardGeneral.modalAppColorSchemePicker.auto"
                  )
                : appContext.appColorScheme === "dark"
                ? t(
                    "screens.settings.cardGeneral.modalAppColorSchemePicker.dark"
                  )
                : t(
                    "screens.settings.cardGeneral.modalAppColorSchemePicker.light"
                  )}
            </Text>
          }
        />

        <Divider withoutMarginVertical style={{ marginVertical: 2 }} />

        <SettingComponent
          appContext={appContext}
          title={t("screens.settings.cardGeneral.expertModeTitle")}
          description={t("screens.settings.cardGeneral.expertModeDescription")}
          textContainerStyle={{ width: "80%" }}
          rightComponent={
            <MySwitch
              value={appContext.isUserExpertModeEnabled}
              onValueChange={(e) => appContext.setIsUserExpertModeEnabled(e)}
            />
          }
        />
      </Card>

      <Card contentPaddingTop={10} contentPaddingBottom={10}>
        <SettingComponent
          appContext={appContext}
          text="Developer Mode"
          rightComponent={
            <MySwitch
              value={appContext.isUserDeveloperModeEnabled}
              onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
            />
          }
        />
      </Card>

      <Card
        cardTopicText={t("screens.settings.cardLegalInformation.cardTitle")}
        contentPaddingTop={10}
        contentPaddingBottom={10}
      >
        <SettingComponent
          appContext={appContext}
          text={t("screens.settings.cardLegalInformation.openSourceLicences")}
          onPress={() => navigation.navigate("modalOpenSourceLicences")}
          rightComponent={
            <MyIcon
              name="chevron-right"
              size={24}
              color={appContext.appTheme.icon}
            />
          }
        />

        <Divider withoutMarginVertical style={{ marginVertical: 2 }} />

        <SettingComponent
          appContext={appContext}
          text={t("screens.settings.cardLegalInformation.termsOfService")}
          onPress={() =>
            // TODO: open privacy policy page

            Alert.alert(
              "Terms of service",
              "Soon the device will open the terms of service page in your browser."
            )
          }
          rightComponent={
            <MyIcon
              name="chevron-right"
              size={24}
              color={appContext.appTheme.icon}
            />
          }
        />

        <Divider withoutMarginVertical style={{ marginVertical: 2 }} />

        <SettingComponent
          appContext={appContext}
          text={t("screens.settings.cardLegalInformation.privacyPolicy")}
          onPress={() => {
            // TODO: open privacy policy page

            Alert.alert(
              "Privacy policy",
              "Soon the device will open the privacy policy page in your browser."
            );
          }}
          rightComponent={
            <MyIcon
              name="chevron-right"
              size={24}
              color={appContext.appTheme.icon}
            />
          }
        />
      </Card>
    </View>
  );
}

function SettingComponent({
  appContext,
  onPress,
  text,
  title,
  description,
  rightComponent,
  textContainerStyle,
}) {
  const Component = ({ children }) => {
    if (onPress) {
      return (
        <TouchableOpacity
          onPress={onPress}
          activeOpacity={appContext.appTheme.touchableOpacity.activeOpacity}
        >
          {children}
        </TouchableOpacity>
      );
    }

    return <>{children}</>;
  };

  const TextComponent = () => {
    if (text) {
      return (
        <Text
          style={[
            { color: appContext.appTheme.text },
            AppStyles.typography14,
            textContainerStyle,
          ]}
        >
          {text}
        </Text>
      );
    }

    return (
      <View style={textContainerStyle}>
        <Text
          style={[AppStyles.typography16, { color: appContext.appTheme.text }]}
        >
          {title}
        </Text>
        <Text
          style={[
            AppStyles.typography14,
            { color: appContext.appTheme.textSecondary },
          ]}
        >
          {description}
        </Text>
      </View>
    );
  };

  return (
    <Component>
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          paddingTop: 8,
          paddingBottom: 8,
        }}
      >
        <TextComponent />

        {rightComponent}
      </View>
    </Component>
  );
}
