import React, { useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { Props } from "./FeedBackBox.types";
import { styles } from "./FeedBackBox.styles";
import FeedBackBoxRight from "../../assets/ReactSVG/feedBackBoxRight";
import { TextInput } from "react-native";

export default function FeedBackBox(Props: Props) {
  const [comment, setComment] = useState("");

  const onSkip = () => {
    if (Props.onSkip) {
      Props.onSkip();
    }
  };
  const onSubmit = () => {
    if (Props.onSubmit) {
      Props.onSubmit(comment);
    }
  };

  return (
    <View
      style={{
        backgroundColor: "white",
        padding: 20,
        borderRadius: 20,
        // borderWidth: 1,
        elevation: 4,
      }}
    >
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <FeedBackBoxRight />

        <Text
          style={{
            color: "#046A46",
            fontSize: 14,
            fontWeight: "400",
            marginLeft: 10,
          }}
        >
          Thanks again for your feedback.
        </Text>
      </View>
      <View style={{ borderWidth: 0.5, marginVertical: 10 }} />

      <View>
        <Text style={{ color: "#545454", fontSize: 14, fontWeight: "400" }}>
          Tell Us More
        </Text>
        <View style={{ marginVertical: 20 }}>
          <TextInput
            style={styles.input}
            multiline
            placeholder="Comments (optional)"
            onChangeText={setComment}
            value={comment}
          />
          <Text style={styles.remainingChars}>
            {comment.length}/{Props.totalCharacters || 200}
          </Text>
        </View>
      </View>

      <View style={{ backgroundColor: "#EEE", padding: 10, borderRadius: 10 }}>
        <Text style={{ color: "#545454", fontSize: 12, fontWeight: "400" }}>
          We’re unable to respond directly to your feedback. If you have a
          customer support inquiry, please contact customer support.
        </Text>
      </View>

      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "flex-end",
          marginTop: 40,
        }}
      >
        <TouchableOpacity
          style={{
            borderWidth: 1,
            borderRadius: 30,
            borderColor: "#545454",
            paddingVertical: 5,
            paddingHorizontal: 10,
            marginHorizontal: 10,
          }}
          onPress={onSkip}
        >
          <Text style={{ color: "#545454", fontSize: 14, fontWeight: "600" }}>
            skip
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={{
            borderWidth: 1,
            borderRadius: 30,
            paddingVertical: 5,
            paddingHorizontal: 10,
            backgroundColor: "#333",
            marginHorizontal: 10,
          }}
          onPress={onSubmit}
        >
          <Text style={{ color: "#FFF", fontSize: 15, fontWeight: "600" }}>
            Submit
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}