import React, { useContext, useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";
import { Props } from "./Feedback.types";
import { styles } from "./Feedback.styles";

import { TouchableOpacity } from "react-native";

import CustomRating from "../CustomRating/CustomRating";
import Notification from "../Notification/Notification";
export default function Feedback(Props: Props) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [nameError, setNameError] = useState("");
  const [emailError, setEmailError] = useState("");
  const [messageError, setMessageError] = useState("");
  const [errorVisiable, setErrorVisiable] = useState(false);
  const [rating, setRating] = useState(0);

  const { showNotification } = useContext(Notification.Context);

  const handleFeedbackSubmit = () => {
    const nameRegex = /^[A-Z" "a-z]+$/;
    const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

    // Reset errors
    setNameError("");
    setEmailError("");
    setMessageError("");
    setErrorVisiable(false);

    let hasErrors = false;

    if (!nameRegex.test(name) || name === "") {
      setNameError("Please Enter Valid Name");
      setErrorVisiable(true);
      hasErrors = true;
    }

    if (!emailRegex.test(email) || email === "") {
      setEmailError("Please Enter Valid Email");
      setErrorVisiable(true);
      hasErrors = true;
    }
    if (message === "") {
      setMessageError("Please Enter Messge");
      setErrorVisiable(true);
      hasErrors = true;
    }

    if (hasErrors) {
      return;
    }
    const feedBack = { name, email, message, rating };
    if (Props.onSubmit) {
      const feedBack = { name, email, message, rating };
      Props.onSubmit(feedBack);
    }
    showNotification({
      title: Props.notificationTitle,
      ...(Props.notificationDetails && { detail: Props.notificationDetails }),
      ...(Props.notificationIcon && { image: Props.notificationIcon }),
    });
  };

  return (
    <View style={[styles.mainViewStyle, Props.mainViewStyle]}>
      <View style={[styles.headerViewStyle, Props.headerViewStyle]}>
        <Text style={[styles.headerTextStyle, Props.headerTextStyle]}>
          Interactive Feedback Hub
        </Text>
      </View>
      <View style={[styles.detailsViewStyle, Props.detailsViewStyle]}>
        <Text style={[styles.detailsTextStyle, Props.detailsTextStyle]}>
          Empowering seamless communication and Iteration
        </Text>
      </View>

      <View style={[styles.inputMainViewStyle, Props.inputMainViewStyle]}>
        <View
          style={[styles.inputBoxTitleViewStyle, Props.inputBoxTitleViewStyle]}
        >
          <Text
            style={[
              styles.inputBoxTitleTextStyle,
              Props.inputBoxTitleTextStyle,
            ]}
          >
            Name:
          </Text>
        </View>

        <TextInput
          placeholder="Your name"
          placeholderTextColor="#9CA3AF"
          value={name}
          onChangeText={(text) => {
            setNameError("");
            setName(text);
          }}
          style={[styles.inputBoxStyle, Props.inputBoxStyle]}
        />
        {errorVisiable && (
          <Text style={[styles.ErrorTextStyle, Props.ErrorTextStyle]}>
            {nameError}
          </Text>
        )}
      </View>

      <View>
        <View
          style={[styles.inputBoxTitleViewStyle, Props.inputBoxTitleViewStyle]}
        >
          <Text
            style={[
              styles.inputBoxTitleTextStyle,
              Props.inputBoxTitleTextStyle,
            ]}
          >
            Email:
          </Text>
        </View>

        <TextInput
          placeholder="Your Email"
          placeholderTextColor="#9CA3AF"
          value={email}
          onChangeText={(text) => {
            setEmailError("");
            setEmail(text);
          }}
          style={[styles.inputBoxStyle, Props.inputBoxStyle]}
        />
        {errorVisiable && (
          <Text style={[styles.ErrorTextStyle, Props.ErrorTextStyle]}>
            {emailError}
          </Text>
        )}
      </View>

      <View>
        <View
          style={[styles.inputBoxTitleViewStyle, Props.inputBoxTitleViewStyle]}
        >
          <Text
            style={[
              styles.inputBoxTitleTextStyle,
              Props.inputBoxTitleTextStyle,
            ]}
          >
            Message:
          </Text>
        </View>

        <TextInput
          placeholder="Message"
          placeholderTextColor="#9CA3AF"
          editable
          multiline
          numberOfLines={6}
          onChangeText={(text) => {
            setMessageError("");
            setMessage(text);
          }}
          value={message}
          style={[styles.inputBoxStyle, Props.inputBoxStyle]}
        />
        {errorVisiable && (
          <Text style={[styles.ErrorTextStyle, Props.ErrorTextStyle]}>
            {messageError}
          </Text>
        )}
      </View>

      {/* reating */}
      <View style={[styles.ratingOutterView, Props.ratingOutterView]}>
        <View style={[styles.starViewStyle, Props.starViewStyle]}>
          <CustomRating
            maxRating={7}
            getCurrentRating={setRating}
            title={Props.ratingTitle}
            mainViewStyle={[
              { padding: 0, marginHorizontal: 0 },
              Props?.ratingMainViewStyle ? Props.ratingMainViewStyle : {},
            ]}
            ratingTextStyle={Props.ratingTextStyle}
          />
        </View>
      </View>

      <View style={[styles.buttonOutterViewStyle, Props.buttonOutterViewStyle]}>
        <TouchableOpacity
          onPress={handleFeedbackSubmit}
          style={[styles.buttonStyle, Props.buttonStyle]}
        >
          <Text style={[styles.buttonTextStyle, Props.buttonTextStyle]}>
            Continue
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}