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, Spinner } 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';
import { useGetAllCompaignsQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { useSession } from 'next-auth/react';

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',
  },
];

export default function OrganCampaigns() {
  const [modalShow, setModalShow] = React.useState(false);
  const [active, setActive] = useState(false);
  const router = useRouter();
  const [currentPage, setCurrentPage] = useState(1);
  const OrganizationPerPage = 20;
  const { id: OrganiId, name: organName } = router.query;

  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const skip = !token;

  const {
    data: OrganizationCampaigns,
    isLoading: OrganCampaignLoading,
    refetch,
  } = useGetAllCompaignsQuery(
    { token, id: OrganiId, page: currentPage, limit: OrganizationPerPage },
    { refetchOnMountOrArgChange: true, skip }
  );

  console.log('OrganizationCampaigns', OrganizationCampaigns);
  const totalPages = OrganizationCampaigns?.data?.totalCampaignsCount
    ? Math.ceil(OrganizationCampaigns?.data?.totalCampaignsCount / OrganizationPerPage)
    : 1;

  const handlePageChange = (newPage: any) => {
    if (newPage > 0 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

  return (
    <>
      <DashboardLayout>
        {OrganCampaignLoading ? (
          <div className="spinner-container">
            <Spinner animation="border" className="custom-spinner" />
          </div>
        ) : (
          <>
            <div className="pagination">
              <Button
                onClick={() => handlePageChange(currentPage - 1)}
                disabled={currentPage === 1}
              >
                Previous
              </Button>
              {Array.from({ length: totalPages }, (_, index) => (
                <Button
                  key={index + 1}
                  variant={index + 1 === currentPage ? 'primary' : 'outline-primary'}
                  onClick={() => handlePageChange(index + 1)}
                >
                  {index + 1}
                </Button>
              ))}
              <Button
                onClick={() => handlePageChange(currentPage + 1)}
                disabled={currentPage === totalPages}
              >
                Next
              </Button>
            </div>
            <div>
              {OrganizationCampaigns?.data?.allcampaings?.length > 0 ? (
                <>
                  <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">{organName}</h2>
                      </div>
                    </Col>
                  </Row>

                  <Row className="mt-5">
                    {OrganizationCampaigns?.data?.allcampaings?.map((data: any, index: any) => (
                      <div
                        key={index}
                        className="home-dashbaord"
                        onClick={() =>
                          router.push(`/user/campaign/compaign-detail?id=${data?._id}`)
                        }
                      >
                        <Col key={index} lg="3">
                          <div className="card-box">
                            <Image
                              src={data?.thumbnail?.thumbnailUrl}
                              className="thumbnail"
                              alt=""
                              style={{
                                width: '100%',
                                height: '230px',
                                objectFit: 'cover',
                              }}
                            />
                            <div className="home-title">
                              <h4>{data?.title}</h4>
                              <h6>{data?.rating}</h6>
                            </div>
                            <p>{data?.description}</p>
                            <h5>{data?.state}</h5>
                          </div>
                        </Col>
                      </div>
                    ))}
                  </Row>
                </>
              ) : (
                <div className="noData">
                  <h3>No Campaigns to show</h3>
                </div>
              )}
            </div>
          </>
        )}
      </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>
  );
}