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, Fade, Form, ListGroup, Nav, Row, 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 toast from 'react-hot-toast';
import { useDeleteOrganizorMutation } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { useSession } from 'next-auth/react';
export default function Setting() {
  const [modalShow2, setModalShow2] = React.useState(false);
  const [show, setShow] = useState(true);
  const [open, setOpen] = useState(false);
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  console.log('token121212121', token);
  const [deleteOrganizor, { isLoading: any }] = useDeleteOrganizorMutation();
  const handleUserDelete = async (id: any) => {
    setModalShow2(false);
    try {
      const response = await deleteOrganizor({
        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 (
    <>
      <DashboardLayout>
        <div className="setting-page">
          <h2 className="heading">Settings</h2>
          <Row>
            <Col lg={9}>
              <Row>
                <Col lg={6}>
                  <div className="setting-list">
                    <p className="mb-0">Notifications</p>
                    <Form>
                      <Form.Check // prettier-ignore
                        // label="Push"
                        // placeholder="On"
                        type="switch"
                        id="custom-switch"
                        className="ms-lg-3 mt-lg-0 mt-3"
                      />
                    </Form>
                  </div>

                  {/* <div
                    className="setting-list"
                    onClick={() => router.push("/settings/report-post")}
                  >
                    <p className="mb-0">Reported Post</p>
                  </div> */}
                  <div
                    className="setting-list"
                    onClick={() => router.push('/organizer/settings/terms-conditions')}
                  >
                    <p className="mb-0">Terms & Conditions</p>
                  </div>
                  <div
                    className="setting-list"
                    onClick={() => router.push('/organizer/settings/reported-history')}
                  >
                    <p className="mb-0">Reported History</p>
                  </div>
                </Col>
                <Col lg={6}>
                  <div
                    className="setting-list"
                    onClick={() => router.push('/organizer/settings/privacy-policy')}
                  >
                    <p className="mb-0">Privacy Policy</p>
                  </div>
                  <div
                    className="setting-list"
                    onClick={() => router.push('/organizer/settings/change-password')}
                  >
                    <p className="mb-0">Change Password</p>
                  </div>
                  {/* <div
                    className="setting-list"
                    onClick={() => router.push("/settings/report-user")}
                  >
                    <p className="mb-0">Reported User</p>
                  </div> */}
                  {/* <div
                    className="setting-list"
                    onClick={() => router.push("/settings/about")}
                  >
                    <p className="mb-0">About Us</p>
                  </div> */}
                  <div className="setting-list" onClick={() => setModalShow2(true)}>
                    <p className="mb-0">Delete Account</p>
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
        <Unblock
          show={modalShow2}
          onHide={() => {
            setModalShow2(false);
          }}
          onClick={handleUserDelete}
        />
      </DashboardLayout>
    </>
  );
}

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>
  );
}