import { useContext, useState } from "react";
import {
  AppContext,
  AppStyles,
  Constants,
  ModalContainer,
} from "../../../../../utils";
import { useTranslation } from "react-i18next";
import { ScrollView, Text, TextInput, View } from "react-native";
import MyButton, { MyIconButton } from "../../../../../Components/Button";
import Card from "../../../../../Components/Card";

const defaultRating = 0;

const feedbackDataDe = [
  {
    title: "Produktbewertung",
    text: "Bewerten Sie Ihre Gesamtzufriedenheit mit dem Produkt.",
    textPlaceholder:
      "Besonders gut gefällt mir...\n\nNicht gut gefällt mir...\n\nVerbessern würde ich...",
  },
  {
    title: "Handhabung",
    text: "Bewerten Sie, wie einfach und komfortabel das Produkt in der Handhabung ist.",
    textPlaceholder:
      "Besonders gut gefällt mir...\n\nNicht gut gefällt mir...\n\nVerbessern würde ich...",
  },
  {
    title: "Design",
    text: "Bewerten Sie das Design des Produkts.",
    textPlaceholder:
      "Besonders gut gefällt mir...\n\nNicht gut gefällt mir...\n\nVerbessern würde ich...",
  },
  {
    title: "Sonstiges",
    text: "Teilen Sie uns gerne weitere Gedanken und Anregungen mit, um uns bei der kontinuierlichen Verbesserung unserer Produkte zu unterstützen.",
    textPlaceholder: "Ich würde mir wünschen...",
  },
];

const feedbackDataEn = [
  {
    title: "Product Rating",
    text: "Rate your overall satisfaction with the product.",
    textPlaceholder:
      "I particularly like...\n\nI don't like...\n\nI would suggest improving...",
  },
  {
    title: "Ease of Use",
    text: "Rate how easy and comfortable the product is to use.",
    textPlaceholder:
      "I particularly like...\n\nI don't like...\n\nI would suggest improving...",
  },
  {
    title: "Design",
    text: "Rate the design of the product.",
    textPlaceholder:
      "I particularly like...\n\nI don't like...\n\nI would suggest improving...",
  },
  {
    title: "Other",
    text: "Feel free to share additional thoughts and suggestions to help us in continuously improving our products.",
    textPlaceholder: "I would wish for...",
  },
];

const feedbackData = [
  {
    rating: defaultRating,
    textInput: "",
  },
  {
    rating: defaultRating,
    textInput: "",
  },
  {
    rating: defaultRating,
    textInput: "",
  },
  {
    ratingDisabled: true,
    rating: defaultRating,
    textInput: "",
  },
];

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

  const [data, setData] = useState(feedbackData);
  const [step, setStep] = useState(0);

  const feedbackDataLangauge =
    appContext.appLanguage === Constants.defaultLanguage
      ? feedbackDataDe
      : feedbackDataEn;

  const handleBackPress = () => {
    if (step === 0) {
      navigation.goBack();
    } else {
      setStep(step - 1);
    }
  };

  const handleContinuePress = () => {
    const nextStep = step + 1;

    if (nextStep >= feedbackData.length) {
      navigation.navigate("help");
      navigation.navigate("modalFeedbackFinished", data);
    } else {
      setStep(nextStep);
    }
  };

  const handleRating = (rating) => {
    const newData = [...data];
    newData[step].rating = rating;
    setData(newData);
  };

  const renderStars = () => {
    if (data[step].ratingDisabled) return null;

    const stars = [];

    for (let i = 1; i <= 5; i++) {
      stars.push(
        <MyIconButton
          key={i}
          onPress={() => handleRating(i)}
          iconName={data[step].rating >= i ? "star" : "star"}
          iconSize={36}
          iconColor={
            data[step].rating >= i
              ? appContext.appTheme.colors.primary
              : appContext.appTheme.colors.gray
          }
          activeOpacity={0.7}
        />
      );
    }

    return (
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          gap: 10,
        }}
      >
        <View style={{ flexDirection: "row" }}>{stars}</View>
        <Text style={{ color: appContext.appTheme.colors.primary }}>
          {
            t("screens.help.modalFeedbackSteps.startTexts", {
              returnObjects: true,
            })[data[step].rating - 1]
          }
        </Text>
      </View>
    );
  };

  const isContinueButtonDisabled = () => {
    if (data[step].ratingDisabled) return false;

    if (data[step].rating === 0) return true;

    return false;
  };

  return (
    <ModalContainer withoutPadding>
      <ScrollView>
        <Card
          cardTopicText={t("screens.help.modalFeedbackSteps.cardTopicText")}
        >
          <Text
            style={[
              { color: appContext.appTheme.text, fontWeight: "bold" },
              AppStyles.typography16,
            ]}
          >
            {feedbackDataLangauge[step].title}
          </Text>

          <Text
            style={[
              { color: appContext.appTheme.text },
              AppStyles.typography14,
            ]}
          >
            {feedbackDataLangauge[step].text}
          </Text>

          {renderStars()}

          <View style={{ marginTop: 10 }}>
            <TextInput
              maxLength={Constants.globals.faq_max_input_length}
              multiline
              placeholder={feedbackDataLangauge[step].textPlaceholder}
              placeholderTextColor={appContext.appTheme.textSecondary}
              value={data[step].textInput}
              onChangeText={(text) => {
                const newData = [...data];
                newData[step].textInput = text;
                setData(newData);
              }}
              style={{
                textAlignVertical: "top",
                height: 40 * 8,
                borderWidth: 1,
                borderColor: appContext.appTheme.divider,
                borderRadius: 10,
                padding: 12,
                color: appContext.appTheme.text,
                backgroundColor: appContext.appTheme.backgroundColor,
              }}
            />
          </View>

          <View
            style={{
              flexDirection: "row",
              marginTop: 10,
              width: "100%",
              justifyContent: "space-between",
            }}
          >
            <MyButton
              style={{ width: "38%" }}
              title={
                step === 0
                  ? t("screens.help.modalFeedbackSteps.cancelButton")
                  : t("screens.help.modalFeedbackSteps.backButton")
              }
              buttonGradientColor={Constants.gradients.gray}
              onPress={() => handleBackPress()}
            />
            <MyButton
              style={{ width: "58%" }}
              title={
                step === feedbackData.length - 1
                  ? t("screens.help.modalFeedbackSteps.sendFeedbackButton")
                  : t("screens.help.modalFeedbackSteps.continueButton")
              }
              onPress={() => handleContinuePress()}
              disabled={isContinueButtonDisabled()}
            />
          </View>
        </Card>

        <View style={AppStyles.appBottom} />
      </ScrollView>
    </ModalContainer>
  );
}
