// import './Header.css'
// import './Footer.css'
// import '../components/StarRating.jsx'
// import '../components/RecommendationSlider.jsx'


// FeedbackForm.js
import React, { useState } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import StarIcon from '@mui/icons-material/Star';
// import { Slider } from '@material-ui/core';
import Slider from "@mui/material/Slider";
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import './FeedbackPage.css'; // Import your CSS file
import Rating from '@mui/material/Rating';


const labels = {
  0.5: 'Useless',
  1: 'Useless+',
  1.5: 'Poor',
  2: 'Poor+',
  2.5: 'Ok',
  3: 'Ok+',
  3.5: 'Good',
  4: 'Good+',
  4.5: 'Excellent',
  5: 'Excellent+',
};

function getLabelText(value) {
  return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
}

export default function FeedbackForm() {
  const [rating, setRating] = useState(2);
  const [hover, setHover] = useState(-1);
  const [recommendation, setRecommendation] = useState(5);
  const [comments, setComments] = useState('');
  const [feedbackResponse, setFeedbackResponse] = useState(null);
  const [success, setSuccess] = useState(null);
  const [showSuccessToast, setShowSuccessToast] = useState(false);
  const [showErrorToast, setShowErrorToast] = useState(false);
  const toggleShowSuccess = () => setShowSuccessToast(!showSuccessToast);
  const toggleShowError = () => setShowErrorToast(!showErrorToast);

  const handleRatingChange = (event, newValue) => {
    setRating(newValue);
  };

  const handleRecommendationChange = (event, newValue) => {
    setRecommendation(newValue);
  };

  const handleCommentsChange = (event) => {
    setComments(event.target.value);
  };

  const handleSubmit = () => {
    // Handle form submission (e.g., send data to the server)
    const feedbackInfo = {
      "rating": rating,
      "recommendation": recommendation,
      "comments": comments
    }

    console.log('Submitted:', feedbackInfo);
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(
          feedbackInfo
          )
      };
      
      async function attemptSendingFeedback() {
        const response = await fetch("http://127.0.0.1:8000/sabreapi/v1/feedback/", requestOptions);
        const feedbackResult = await response.json();
        if (feedbackResult.success == true) {
            console.log('in here')
            setSuccess(true);
            setFeedbackResponse(null);
            setShowSuccessToast(true);
        }
        else {
            setSuccess(false);
            // setBookingResponse(bookingResult.errors)
            setShowErrorToast(true)
        }
       
    }
    attemptSendingFeedback();  
  };

  return (
    <div className="feedback-form-container">
      {/* Header Component */}
      <header>
        <h2>Feedback Form</h2>
      </header>

      {/* Star Rating */}
      <Box
        sx={{
          width: 200,
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <Rating
          name="hover-feedback"
          value={rating}
          precision={0.5}
          getLabelText={getLabelText}
          onChange={handleRatingChange}
          onChangeActive={(event, newHover) => {
            setHover(newHover);
          }}
          emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
        />
        {rating !== null && <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : rating]}</Box>}
      </Box>

      {/* Recommendation Slider */}
      <div className="recommendation-slider">
        <Typography id="discrete-slider" gutterBottom>
          How likely are you to recommend this software product to someone else?
        </Typography>
        <Slider
          value={recommendation}
          onChange={handleRecommendationChange}
          aria-labelledby="discrete-slider"
          valueLabelDisplay="auto"
          step={1}
          marks
          min={1}
          max={10}
        />
      </div>

      {/* Optional Comments */}
      <div className="comments">
        <TextField
          sx={{
            width: 560,
            display: 'flex',
          }}
          id="outlined-multiline-static"
          label="Additional comments (optional)"
          multiline
          rows={4}
          variant="outlined"
          value={comments}
          onChange={handleCommentsChange}
        />
      </div>

      {/* Submit Button */}
      <Button variant="contained" color="primary" onClick={handleSubmit}>
        Submit
      </Button>

    </div>
  );
};

// export default FeedbackForm;