import Dashboard_Chart from '@/components/Chart/Dashboard_Chart';
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import {
  Button,
  Card,
  Col,
  Container,
  Fade,
  Form,
  ListGroup,
  Nav,
  Row,
  Spinner,
  Tab,
} from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
// import Alert from 'react-bootstrap/Alert';
// import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
import Password from '@/components/Form/Password';
import Collapse from 'react-bootstrap/Collapse';
import Modal from 'react-bootstrap/Modal';
import { useRouter } from 'next/router';
import { useDeleteUserMutation } from '@/lib/redux/services/Userflow/UserDashboard.api';
import toast from 'react-hot-toast';
import { useSession } from 'next-auth/react';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import FileUpload from '@/components/UploadFiles/FileUpload';
import { useForm } from 'react-hook-form';
import { useCreateGuestFeedbackMutation } from '@/lib/redux/services/auth.api';
export default function Setting() {
  const [modalShow2, setModalShow2] = React.useState(false);
  const [modalShowHelpfeed, setModalShowHelpfeed] = React.useState(false);
  const [show, setShow] = useState(true);
  const [open, setOpen] = useState(false);
  const { data: session }: any = useSession();

  const token = session?.user?.token;
  const [deleteUser, { isLoading: any }] = useDeleteUserMutation();
  const handleUserDelete = async (id: any) => {
    setModalShow2(false);
    try {
      const response = await deleteUser({
        token,
      }).unwrap();
      if (response.status) {
        toast.success('User Deleted Successfully');
        router.push('/auth/login/');
      }
    } catch (err: any) {
      console.log(err);
      toast.error(err?.data?.message);
    }
  };
  const router = useRouter();

  return (
    <>
      <WebsiteLayout>
        <Container fluid>
          <div className="main-sect">
            <div className="setting-page ">
              <Row className="justify-content-center mt-5">
                <h2 className="heading text-center"> Settings </h2>
                <Col lg={9}>
                  <Row>
                    <Col lg={6}>
                      <div
                        className="setting-list"
                        onClick={() => router.push('/guest/settings/privacy-policy')}
                      >
                        <p className="mb-0">Privacy Policy</p>
                      </div>
                    </Col>
                    <Col lg={6}>
                      <div
                        className="setting-list"
                        onClick={() => router.push('/guest/settings/terms-conditions')}
                      >
                        <p className="mb-0"> Terms & Conditions </p>
                      </div>
                    </Col>
                  </Row>
                  <Row className="justify-content-center">
                    <Col lg={6}>
                      <div className="setting-list" onClick={() => setModalShowHelpfeed(true)}>
                        <p className="mb-0">Help and Feedback</p>
                      </div>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </div>
          </div>
        </Container>
        {/* <Unblock
          show={modalShow2}
          onHide={() => {
            setModalShow2(false);
          }}
          onClick={handleUserDelete}
        /> */}
        <HelpFeedbackModal
          show={modalShowHelpfeed}
          onHide={() => {
            setModalShowHelpfeed(false);
          }}
         
        />
      </WebsiteLayout>
    </>
  );
}

// function Unblock({ show, onClick, onHide, props }: any) {
//   const [chat, setChat] = useState(true);

//   const router = useRouter();
//   return (
//     <Modal
//       {...props}
//       show={show}
//       onHide={onHide}
//       size="md"
//       aria-labelledby="contained-modal-title-vcenter"
//       centered
//       className="affilaite-modal"
//     >
//       <Modal.Header closeButton></Modal.Header>

//       <Modal.Body>
//         <div className="report">
//           <h4 className="text-center mb-2 mt-4">Delete Account</h4>
//           <h5 className="mb-3 text-dark">Are you sure you want to delete your account?</h5>
//           <div className="blocked-btn ">
//             <button type="button" className="w-50 btn btn-primary no-user" onClick={onHide}>
//               No
//             </button>
//             <button type="button" className="w-50 btn btn-primary unblock-user" onClick={onClick}>
//               Yes
//             </button>
//           </div>
//         </div>
//       </Modal.Body>
//     </Modal>
//   );
// }

function HelpFeedbackModal(props: any) {
  const [chat, setChat] = useState(true);
  const [modalShowCongrats, setModalShowCongrats] = React.useState(false);
  const { register, handleSubmit, reset, setValue, control } = useForm<any>();
  const router = useRouter();
  const [Helpandfeedback, { isLoading }] = useCreateGuestFeedbackMutation();
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const [images, setImages] = useState<any>([]);

  const handleFeedback = async (data: any) => {
    const formData = new FormData();
    const feilds = {
      subject: data?.title,
      description: data?.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));
  if (images && images.length > 0) {
  images.forEach((file: File) => {
    formData.append('images', file); // This is binary
  });
}
    try {
      const response = await Helpandfeedback({
        body: formData,
        token,
      }).unwrap();
      if (response?.status) {
        setModalShowCongrats(true);
      }
    } catch (error: any) {
      toast?.error(error?.data?.message);
    }
  };
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <Row>
            <Col lg="12">
              <form onSubmit={handleSubmit(handleFeedback)}>
                <div className="help-feedback">
                  <Row>
                    <Col lg={12}>
                      <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-50"
                        type="submit"
                        onClick={() => setModalShowCongrats(true)}
                        disabled={isLoading}
                      >
                        {isLoading ? <Spinner size="sm" /> : 'Submit'}
                      </button>
                    </Col>
                  </Row>
                </div>
              </form>
            </Col>
          </Row>
        </div>
        <Congrats show={modalShowCongrats} onHide={() => setModalShowCongrats(false)} />
      </Modal.Body>
    </Modal>
  );
}
function Congrats(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="lg"
      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-50 mt-4"
            onClick={() => router.reload()}
          >
            Go back
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}