import { useContext } from "react";
import { AppContext, AppStyles, Constants } from "../../utils";
import { Linking, Text, View } from "react-native";
import MyIcon from "../../Components/Icon";
import { MyPickerModalListItem } from "../../Components/Modal";
import { MyTextButton } from "../../Components/Button";
import { useTranslation } from "react-i18next";

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

  return (
    <View>
      <InfoHeader
        appContext={appContext}
        iconName="face-agent"
        text={t("screens.help.pageInfoText")}
      />

      <View style={{ width: "100%" }}>
        <MyPickerModalListItem
          leftIconName="help-circle"
          itemName={t("screens.help.items.helpCenter")}
          rightIconName="chevron-right"
          onPress={() => navigation.navigate("modalHelpCenter")}
        />
        <MyPickerModalListItem
          leftIconName="message-text"
          itemName={t("screens.help.items.giveFeedback")}
          rightIconName="chevron-right"
          onPress={() => navigation.navigate("modalGiveFeedback")}
        />
      </View>

      <View style={{ marginTop: 40, alignItems: "center" }}>
        <Text
          style={[
            { color: appContext.appTheme.text, fontWeight: "bold" },
            AppStyles.typography16,
          ]}
        >
          {t("screens.help.textButtonContactUs")}
        </Text>

        <MyTextButton
          title={Constants.globals.contact_us_email}
          actionColor
          textSelectable
          onPress={() =>
            Linking.openURL(`mailto:${Constants.globals.contact_us_email}`)
          }
        />
      </View>
    </View>
  );
}

export function InfoHeader({ appContext, iconName, text }) {
  return (
    <View style={{ alignItems: "center" }}>
      <View style={{ width: "80%", alignItems: "center" }}>
        <MyIcon name={iconName} size={72} />

        <Text
          style={[
            {
              textAlign: "center",
              marginTop: 20,
              marginBottom: 40,
              color: appContext.appTheme.colors.primary,
            },
            AppStyles.typography20,
          ]}
        >
          {text}
        </Text>
      </View>
    </View>
  );
}
