// import Dashboard_Chart from "@/components/Chart/Dashboard_Chart";
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import Link from 'next/link';
import React, { useState } from 'react';
import { Button, Card, Col, ListGroup, Dropdown, Nav, Row, Tab, Spinner } from 'react-bootstrap';
import Modal from 'react-bootstrap/Modal';
import Image from 'react-bootstrap/Image';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
import { useRouter } from 'next/router';
import { ChatAccordian } from '@/components/ChatAccordian/ChatAccordian';
import FileUpload2 from '@/components/UploadFiles/FileUpload2';
import FileUpload from '@/components/UploadFiles/FileUpload';
import { useForm } from 'react-hook-form';
import toast from 'react-hot-toast';
import { CreateFeedbackParams } from '@/types';
import { useCreateFeedbackMutation } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { useSession } from 'next-auth/react';

export default function HelpFeedback() {
  const router = useRouter();
  const [modalShowCongrats, setModalCongrats] = useState(false);
  const [images, setImages] = useState<File[]>([]);

  const { register, handleSubmit, reset, setValue, control } = useForm<any>();
  const [Createfeedback, { isLoading }] = useCreateFeedbackMutation();
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  console.log('qweqwe', session?.user?.token);

  const handleFeedbackSubmit = async (datamodel: CreateFeedbackParams) => {
    const formData = new FormData();
    const feilds = {
      subject: datamodel.title,
      description: datamodel?.messsage,
    };

    const isEmptyField = Object.values(feilds).some((value) => !value);

    if (isEmptyField) {
      return toast.error('All feilds are required');
    }

    Object.entries(feilds).forEach(([key, value]) => formData.append(key, value as string));
    images.forEach((file, index) => {
      formData.append(`images`, file);
    });

    try {
      const response: any = await Createfeedback({
        body: formData,
        token,
      }).unwrap();
      if (response?.status) {
        toast.success('feedback Sent Succesfully');
        reset();
        setImages([]);
      } else {
        toast.error('Something went wrong');
      }
    } catch (err: any) {
      toast.error(err);
    }
  };

  return (
    <>
      <DashboardLayout>
        <form onSubmit={handleSubmit(handleFeedbackSubmit)}>
          <div>
            <h2 className="heading text-dark">Help & Feedback</h2>

            <Row>
              <Col lg="12">
                <div className="help-feedback">
                  <Row>
                    <Col lg={4}>
                      <div className="form-group">
                        <div className="icon-field">
                          <label htmlFor="">Title</label>
                          <input
                            type="text"
                            className="form-control"
                            placeholder="Enter Title"
                            {...register('title')}
                          />
                        </div>
                      </div>
                      <div className="form-group">
                        <div className="icon-field">
                          <label htmlFor="">Message</label>
                          <textarea
                            className="form-control"
                            placeholder="Type your message here..."
                            {...register('messsage')}
                            rows={8}
                          ></textarea>
                        </div>
                      </div>
                      <div className="pic-upload">
                        <div className="sub-upload">
                          <FileUpload selectedFiles={images} setSelectedFiles={setImages} />
                        </div>
                        {/* <img src="/images/sidbar-icon/upload.png" alt="" />  */}
                      </div>
                      <button className="btn btn-primary mt-3 w-100" type="submit">
                        {isLoading ? <Spinner size="sm" /> : 'Submt'}
                      </button>
                    </Col>
                  </Row>
                </div>
              </Col>
            </Row>

            <Congrats show={modalShowCongrats} onHide={() => setModalCongrats(false)} />
          </div>
        </form>
      </DashboardLayout>
    </>
  );
}

function Congrats(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-3 mt-4">Congratulation!</h4>
          <h5 className="text-dark">Your Feedback Submitted Successfully</h5>
          <button
            type="button"
            className="btn btn-primary w-100 mt-4"
            onClick={() => router.push('/organizer/organizer-dashboard')}
          >
            Go back to Home
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}