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 } 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 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 Search() {
  const [modalShow, setModalShow] = useState(false);
  // const closeHeart = ()=>setModalShow(false)
  // const [modalShow2, setModalShow2] = React.useState(false);
  const [active, setActive] = useState(false);
  const router = useRouter();

  return (
    <>
      <DashboardLayout>
        <div>
          <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">search Result</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>
                    {/* <FontAwesomeIcon icon={faEllipsisVertical} /> */}
                  </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.Item href="#" className="">
                      <div className="link" onClick={() => router.reload()}>
                        <Link href={""}>Hide Art</Link>
                      </div>
                    </Dropdown.Item> */}
                  </Dropdown.Menu>
                </Dropdown>
              </div>
            </Col>
          </Row>
          <Row className="mt-5">
            <div className="home-dashbaord" onClick={() => router.push('/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>
        <Likes show={modalShow} onHide={() => setModalShow(false)} />
      </DashboardLayout>
    </>
  );
}

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