// 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 } from 'react-bootstrap';
// import TimeTable from "@/components/Table/TimeTable";
// import ProfilePictureUpload from "@/components/Form/ProfilePictureUpload";
// import Password from "@/components/Form/Password";
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 router, { useRouter } from 'next/router';
import { ChatAccordian } from '@/components/ChatAccordian/ChatAccordian';

const payment = [
  {
    id: 0,
    price: '$ 25.00',
    Tax: '$2.30',
    Subtotal: '$27.30',
  },
];

export default function PaymentMethod() {
  const [modalShow, setModalShow] = useState(false);
  const [modalShowAddCard, setModalAddCard] = useState(false);
  const [modalShowCongrats, setModalCongrats] = useState(false);
  // const [modalShow4, setModalShow4] = React.useState(false);
  // const [modalShow5, setModalShow5] = React.useState(false);
  // const [modalShow6, setModalShow6] = React.useState(false);

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

  return (
    <>
      <DashboardLayout>
        <div>
          <h2 className="heading text-dark">Select Payment Method</h2>

          <Row>
            <Col lg="12">
              <div className="help-feedback">
                <Row>
                  <Col lg={6}>
                    <div className="method-box">
                      {payment.map((data, index) => (
                        <div key={index}>
                          <div className="price">
                            <h6>price</h6>
                            <h5>{data.price}</h5>
                          </div>
                          <div className="price">
                            <h6>Tax</h6>
                            <h5>{data.Tax}</h5>
                          </div>
                          <div className="price">
                            <h6>SubTotal</h6>
                            <h5>{data.Subtotal}</h5>
                          </div>
                        </div>
                      ))}
                      <div className="slct-pymnt">
                        <div className="check">
                          <div className="form-group">
                            <img src={'/images/master-card.png'} alt="" />
                            <input type="radio" id="donation" name="scales" value="donation" />
                            <label>**** **** **** 1234</label>
                          </div>
                        </div>
                        <div className="check">
                          <div className="form-group">
                            <img src={'/images/paypal-card.png'} alt="" />
                            <input type="radio" id="donation" name="scales" value="donation" />
                            <label>**** **** **** 1234</label>
                          </div>
                        </div>
                      </div>
                      <div className="slct-pymnt">
                        <div className="check">
                          <div className="form-group">
                            <img src={'/images/visa-card.png'} alt="" />
                            <input type="radio" id="donation" name="scales" value="donation" />
                            <label>**** **** **** 1234</label>
                          </div>
                        </div>
                        <button
                          type="button"
                          className="w-100 btn btn-primary method-btn"
                          onClick={() => setModalAddCard(true)}
                        >
                          <img src={'/images/new-card.svg'} alt="" /> Add New Card
                        </button>
                      </div>
                    </div>
                    <div className="form-check checkbox mt-3 pb-3">
                      <input
                        type="checkbox"
                        name="chkRemember"
                        id="chkRemember"
                        className="form-check-input"
                      />
                      <span className="form-check-checkmark"></span>
                      <label htmlFor="chkRemember" className="form-check-label">
                        Allow Organization to view your email and name
                      </label>
                    </div>
                    <button
                      type="button"
                      onClick={() => setModalCongrats(true)}
                      className="w-50 btn btn-primary"
                    >
                      Confirm
                    </button>
                  </Col>
                </Row>
              </div>
            </Col>
          </Row>
          <AddCard show={modalShowAddCard} onHide={() => setModalAddCard(false)} />
          <Congrats show={modalShowCongrats} onHide={() => setModalCongrats(false)} />
        </div>
      </DashboardLayout>
    </>
  );
}

// Chat Modals

// Icebreaker Modal

// Reporting Modal
function AddCard(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 closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-3 mt-4">Add Card</h4>
          <div className="add-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor=""> Card Holder </label>
                <input type="text" className="form-control" placeholder="John Smith" />
              </div>
            </div>

            <div className="form-group">
              <div className="icon-field">
                <label htmlFor=""> Card Number </label>
                <input type="number" className="form-control" placeholder="**** **** **** ***4" />
              </div>
            </div>

            <div className="end-form">
              <div className="form-group">
                <div className="icon-field">
                  <label htmlFor=""> Exp Month </label>
                  <input type="number" className="form-control" placeholder="07" />
                </div>
              </div>

              <div className="form-group">
                <div className="icon-field">
                  <label htmlFor=""> Exp Year </label>
                  <input type="number" className="form-control" placeholder="07" />
                </div>
              </div>
            </div>
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor=""> CVC </label>
                <input type="number" className="form-control" placeholder="565" />
              </div>
            </div>
            <div className="blocked-btn ">
              <button
                type="button"
                className="w-50 btn btn-primary no-user"
                onClick={() => router.reload()}
              >
                Cancel
              </button>
              <button
                type="button"
                className="w-50 btn btn-primary unblock-user"
                onClick={() => router.reload()}
              >
                Add Card
              </button>
            </div>
          </div>
        </div>
      </Modal.Body>
    </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>
            Your donation has been sent
            <br /> successfully
          </h5>
          <button type="button" className="btn btn-primary w-50 mt-4" onClick={() => router.back()}>
            Go back to Home
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}