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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { faHeart } from '@fortawesome/free-regular-svg-icons';
import { Card, Col, ListGroup, Row, Dropdown, Button, Container } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';
import CloseButton from 'react-bootstrap/CloseButton';
import { useRouter } from 'next/router';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';

// import ToggleButton from 'react-bootstrap/ToggleButton';

const HomeCanvas = [
  {
    id: 0,
    src: '/images/Rectangle-13.png',
    title: 'Health',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },

  {
    id: 1,
    src: '/images/Rectangle-14.png',
    title: 'Education',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },

  {
    id: 3,
    src: '/images/Rectangle-15.png',
    title: 'Disaster',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 4,
    src: '/images/Rectangle-16.png',
    title: 'NGO’s',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 5,
    src: '/images/Rectangle-13.png',
    title: 'Health',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 6,
    src: '/images/Rectangle-14.png',
    title: 'Education',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 7,
    src: '/images/Rectangle-15.png',
    title: 'Disaster',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 8,
    src: '/images/Rectangle-16.png',
    title: 'NGO’s',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },

  // {
  //   id:9,
  //   src: "/images/home-card-2.png",
  //   title: "Gatorfoam Board"
  // },

  // {
  //   id:4,
  //   src: "/images/super-4.png"

  // }
];

export default function Favorite() {
  const [modalShow, setModalShow] = React.useState(false);
  // const closeHeart = ()=>setModalShow(false)
  // const [modalShow2, setModalShow2] = React.useState(false);
  const [active, setActive] = useState(false);
  const router = useRouter();

  return (
    <>
      <WebsiteLayout>
        <div>
          <Container fluid>
            <div className="main-sect">
              {/* <Row>
                <Col lg="12">
                  <div className="back-link">
                    <img
                      src={'/images/sidbar-icon/arrow-left.svg'}
                      onClick={() => router.back()}
                      alt=""
                    />
                    <h4 className="heading text-dark pb-3 mb-0">Back</h4>
                  </div>
                  <div className="home-hed">
                    <h2 className="heading">Favorite</h2>
                    <Dropdown className="list-down profile-down" align="end">
                      <Dropdown.Toggle id="dropdown-autoclose-inside">
                        <div className="sort">
                          <h3>Sort By</h3>
                          <img src={'/images/sidbar-icon/down.svg'} alt="" />
                        </div>
                      </Dropdown.Toggle>
                      <Dropdown.Menu>
                        <Dropdown.Item href="#" className="">
                          <div className="link" onClick={() => router.reload()}>
                            <Link href={''}>By Size</Link>
                          </div>
                        </Dropdown.Item>
                        <Dropdown.Item href="#" className="">
                          <div className="link">
                            <Link href={''}>Most Visited</Link>
                          </div>
                        </Dropdown.Item>
                        <Dropdown.Item href="#" className="">
                          <div className="link" onClick={() => router.reload()}>
                            <Link href={'#'}>Favorite</Link>
                          </div>
                        </Dropdown.Item>
                      </Dropdown.Menu>
                    </Dropdown>
                  </div>
                </Col>
              </Row> */}

              <Row className="mt-5">
                <Col lg="12">
                  <h2 className="heading text-center">Favourite </h2>
                </Col>
              </Row>

              <Row className="mt-2">
                <div
                  className="home-dashbaord"
                  onClick={() => router.push('/user/dashboard/food-relief')}
                >
                  {HomeCanvas.map((data, index) => (
                    <Col key={index} lg="3">
                      <div className="card-box">
                        <Image src={data.src} className="thumbnail" alt="" />
                        <div className="home-title">
                          <h4>{data.title}</h4>
                          <h6>{data.rating}</h6>
                        </div>
                        <p>{data.pera}</p>
                        <h5>{data.location}</h5>
                      </div>
                    </Col>
                  ))}
                </div>
              </Row>
            </div>
          </Container>
        </div>
        <Likes show={modalShow} onHide={() => setModalShow(false)} />
      </WebsiteLayout>
    </>
  );
}

// Heart like modal

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

      <Modal.Body>
        <div className="congrats">
          <img src={'/images/congrats.png'} alt="" />
          <h4 className="text-center mb-2">Congratulations</h4>
          <p>It’s a Match</p>
          <div className="likes-btn mt-5">
            <button className="btn btn-primary keep-btn" type="button">
              KEEP SWIPING
            </button>
            <button className="btn btn-primary" type="button" onClick={() => router.push('/Chat')}>
              MESSAGE HER
            </button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}