import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, Image } from "react-native";
import { Props, Tthumb } from "./InlineFeedBackThumb.types";
import { styles } from "./InlineFeedBackThumb.styles";
import Thumb from "../../assets/ReactSVG/Thumb";

export default function FeedBackHelp(Props: Props) {
  const [selectedThumb, setSelectedThumb] = useState<Tthumb>();

  const onThumbsUp = () => {
    if (Props.onThumbsUp) {
      Props.onThumbsUp();
    }
    setSelectedThumb("up")
  };

  const onThumbsDown = () => {
    if (Props.onThumbsDown) {
      Props.onThumbsDown();
    }
    setSelectedThumb("down")
  };
  return (

    <View
      style={[styles.mainViewStyle, Props.mainViewStyle]}
    >
      <View>
        <Text style={[styles.TitleTextStyle, Props.titleTextStyle]}>
          {Props.title || "Are these results helpful?"}
        </Text>
        <Text style={[styles.DescriptionTextStyle, Props.descriptionTextStyle]}>{Props.description || "Your feedback helps us improve search results"}</Text>
      </View>
      <View
        style={[styles.buttonViewStyle, Props.buttonViewStyle]}
      >
        <TouchableOpacity onPress={onThumbsUp} style={[{ backgroundColor: selectedThumb == "up" ? "black" : "white", transform: [{ rotate: '180deg' }] }, styles.buttonStyle]}>
          <Thumb color={selectedThumb == "up" ? "#FFF" : "#5E5E5E"} />
        </TouchableOpacity>
        <TouchableOpacity onPress={onThumbsDown} style={[{ backgroundColor: selectedThumb == "down" ? "black" : "white" }, styles.buttonStyle]}>
          <Thumb color={selectedThumb == "down" ? "#FFF" : "#5E5E5E"} />
        </TouchableOpacity>
      </View>
    </View>

  );
}