// import Dashboard_Chart from "@/components/Chart/Dashboard_Chart";
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import React, { useState } from 'react';
import { Button, Col, Row } from 'react-bootstrap';
// import TimeTable from "@/components/Table/TimeTable";
// import ProfilePictureUpload from "@/components/Form/ProfilePictureUpload";
// import Password from "@/components/Form/Password";
import { ChatAccordian } from '@/components/ChatAccordian/ChatAccordian';
import { useRouter } from 'next/router';
import Modal from 'react-bootstrap/Modal';

export default function CreateRoll() {
  const router = useRouter();
  const [modalShowCongrats, setModalCongrats] = useState(false);
  const [modalShowGallery, setModalShowGallery] = React.useState(false);
  const [modalShow4, setModalShow4] = React.useState(false);
  const [modalShow5, setModalShow5] = React.useState(false);
  const [modalShow6, setModalShow6] = React.useState(false);

  const [showInput, setShowInput] = useState(false);

  //  const [modalShow5, setModalShow5] = React.useState(false);

  return (
    <>
      <DashboardLayout>
        <div>
          <h2 className="heading text-dark">Edit Poll</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="Food Relief" />
                      </div>
                    </div>
                    <div className="form-group">
                      <div className="icon-field">
                        <label htmlFor="">Option 1</label>
                        <input type="text" className="form-control" placeholder="Food Relief" />
                      </div>
                    </div>
                    <div className="form-group">
                      <div className="icon-field">
                        <label htmlFor="">Option 2</label>
                        <input type="text" className="form-control" placeholder="Food Relief" />
                      </div>
                    </div>
                    {showInput && (
                      <>
                        <div className="form-group">
                          <div className="icon-field">
                            <label htmlFor="">Option 3</label>
                            <input type="text" className="form-control" placeholder="Food Relief" />
                          </div>
                        </div>
                        <div className="form-group">
                          <div className="icon-field">
                            <label htmlFor="">Option 4</label>
                            <input type="text" className="form-control" placeholder="Food Relief" />
                          </div>
                        </div>
                      </>
                    )}
                    <div className="option-btn">
                      <button onClick={() => setShowInput(!showInput)}>
                        <img src={'/images/sidbar-icon/add-square.svg'} alt="" />{' '}
                        {showInput ? `less options` : `Add More Option`}{' '}
                      </button>
                    </div>

                    <div className="thread-btn">
                      <button
                        className="btn btn-primary mt-3 w-100"
                        type="button"
                        onClick={() => router.push('/admin/admin-comment/edit-thread')}
                      >
                        Save
                      </button>
                    </div>
                  </Col>
                </Row>
              </div>
            </Col>
          </Row>

          <Gallery show={modalShowGallery} onHide={() => setModalShowGallery(false)} />

          <Congrats show={modalShowCongrats} onHide={() => setModalCongrats(false)} />
        </div>
        {/* <MadLibs show={modalShow4} onHide={() => setModalShow4(false)} />

        <Report show={modalShow5} onHide={() => setModalShow5(false)} />

        <Block show={modalShow6} onHide={() => setModalShow6(false)} /> */}

        {/* <MadLibStory
          show={modalShow5}
          onHide={() => setModalShow5(false)}
        /> */}
      </DashboardLayout>
    </>
  );
}

// Chat Modals

// Icebreaker Modal

function Icebreaker(props: any) {
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="icbreak-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="icebrk">
          <img src={'/images/check-1.png'} alt="" />
          <h4 className="text-center mb-2 mt-4">Ice Breaker For You</h4>
          <p>
            You are beautiful that you made me forget my <br />
            pickup line.
          </p>
          <Button className="w-100 mt-3" onClick={() => router.reload()}>
            PLACE IN CHAT
          </Button>
        </div>
      </Modal.Body>
    </Modal>
  );
}

// MadLibs Modal

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.back()}
          >
            Go back to Home
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}

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

      <Modal.Body>
        {chat ? (
          <div className="report">
            <h4 className="text-center mb-2 mt-4">Reason For Reporting</h4>
            <p className="text-dark text-left slogn">What is your reason for Reporting?</p>
            <ChatAccordian />
            <Button
              className="w-100 mt-3 rprt-btn"
              type="button"
              onClick={() => {
                setChat(!chat);
              }}
            >
              Continue
            </Button>
          </div>
        ) : (
          <>
            <div className="report">
              <img src={'/images/check-1.png'} alt="" />
              <h4 className="text-center mb-2 mt-4">Reporting</h4>
              <p>This person has been reported successfully.</p>
              <Button className="w-100 mt-3 rprt-btn" onClick={() => router.reload()}>
                {' '}
                Go Back
              </Button>
            </div>
          </>
        )}
      </Modal.Body>
    </Modal>
  );
}

// Gallery Modal
function Gallery(props: any) {
  const router = useRouter();
  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">
          <div className="files">{/* <FileUpload /> */}</div>
          <button type="button" className="btn btn-primary w-50" onClick={() => router.reload()}>
            Apply
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}