/* eslint-disable @next/next/no-img-element */
import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import { Col, Container, Dropdown, Row, Spinner, Button } from 'react-bootstrap';
import HeroSection from '@/components/HeroSection';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';
import { useGetAllOrganizationQuery } from '@/lib/redux/services/Userflow/UserDashboard.api';
import { useSession } from 'next-auth/react';

export default function UserHome() {
  const [modalShow, setModalShow] = React.useState(false);
  const [organizations, setOrganizations] = useState<any[]>([]);
  const [visibleCount, setVisibleCount] = useState(10); // show 10 initially
  const router = useRouter();

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

  const {
    data: Organ,
    isLoading: OrganLoading,
  } = useGetAllOrganizationQuery(
    { token, page: "", limit: "" },
    { refetchOnMountOrArgChange: true, skip }
  );

  useEffect(() => {
    if (Organ?.data?.organizationModel) {
      setOrganizations(Organ.data.organizationModel);
    }
  }, [Organ]);

  const handleShowMore = () => {
    setVisibleCount((prev) => prev + 10);
  };

  return (
    <>
      <WebsiteLayout>
        {OrganLoading ? (
          <div className="spinner-container">
            <Spinner animation="border" className="custom-spinner" />
          </div>
        ) : (
          <div className="home-section">
            <HeroSection />
            <Container fluid>
              <div className="main-sect">
                <Row className="mt-4">
                  <Col lg="4"></Col>

                  <Col lg="4">
                    <div className="hed mb-0">
                      <h2 className="heading text-center">Home</h2>
                    </div>
                  </Col>
                  <Col lg="4">
                    <div className="home-hed">
                      <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>
                            <div className="link" onClick={() => router.reload()}>
                              <Link href={''}>By Size</Link>
                            </div>
                          </Dropdown.Item>
                          <Dropdown.Item>
                            <div className="link">
                              <Link href={''}>Most Visited</Link>
                            </div>
                          </Dropdown.Item>
                          <Dropdown.Item>
                            <div
                              className="link"
                              onClick={() => router.push('/user/favourite')}
                            >
                              <Link href={'#'}>Favorite</Link>
                            </div>
                          </Dropdown.Item>
                        </Dropdown.Menu>
                      </Dropdown>
                    </div>
                  </Col>
                </Row>

                {/* Organizations */}
                <Row className="mt-3 mb-5">
                  {organizations.slice(0, visibleCount).map((data: any, index: any) => (
                    <div
                      key={index}
                      className="home-dashbaord"
                     onClick={() => router.push(`/guest/guest-campaigns?id=${data?._id}&name=${data?.name}`)}
                    >
                      <Col xl="3">
                        <div className="card-box">
                          <img
                            src={`${data?.image?.mediaUrl}`}
                            className="thumbnail"
                            alt=""
                            style={{
                              width: '100%',
                              objectFit: 'cover',
                              height: '230px',
                            }}
                          />
                          <div className="home-title">
                            <h4>{data?.name}</h4>
                            <h6>{data.rating}</h6>
                          </div>
                          <p>{data.bio}</p>
                          <h5>{data.state}</h5>
                        </div>
                      </Col>
                    </div>
                  ))}
                </Row>

                {/* Show More Button */}
                {visibleCount < organizations.length && (
                  <div className="text-center mb-4">
                    <Button onClick={handleShowMore}>Show More</Button>
                  </div>
                )}
              </div>
            </Container>
          </div>
        )}
      </WebsiteLayout>
    </>
  );
}