"use client";
import React, { useState, useEffect } from "react";
import {handleFetchWithTokenRefresh} from '@utils/common';
import { useCookies } from 'react-cookie';
import InspirationGalleryService, {InspirationGallaryByHomeSection} from "@/service/InspirationGalleryService";
import slugify from 'slugify';
import Image from 'next/image';
import withAuth from "@/withAuth";
import routes from "@/routes";
import {RoleEnum, rowsPerPage} from '@constant/StaticData';
import Pagination from '@/components/PlanPortfolio/Pagination';

const Inspiration: React.FC = () => {

    const [inspirationData, setInspirationData] = useState<InspirationGallaryByHomeSection | undefined>(undefined); 
    const [cookies, setCookie, removeCookie] = useCookies();
    const [totalCount, setTotalCount] = useState<number>(0);
    const [totalPage, setTotalPage] = useState<number>(0);
    const [currentPage, setCurrentPage] = useState<number>(1);
    const fetchData = async () => {
        try {		
          const inspirationHomeSectionData = await InspirationGalleryService.getInspirationGallerybyHomeSection(rowsPerPage, (currentPage-1)*rowsPerPage );

          console.log(inspirationHomeSectionData, "inspirationHomeSectionData");
           if(inspirationHomeSectionData != undefined && inspirationHomeSectionData != null && inspirationHomeSectionData?.InspirationGalleryFind){
            setInspirationData(inspirationHomeSectionData);
            setTotalCount(inspirationHomeSectionData?.InspirationGalleryFind?.total);
            setTotalPage(inspirationHomeSectionData?.InspirationGalleryFind?.pages);
          } 
        } catch (err:any) {
          console.error('Error during fetch data:', err);
          handleFetchWithTokenRefresh(err, cookies, setCookie, fetchData, "Error during fetch data");
        }
      };
    
      useEffect(() => {
        fetchData();
      },[currentPage]);

      const handlePageChange = (page: number) => {
        setCurrentPage(page);
    };
    console.log(inspirationData?.InspirationGalleryFind?.rows);
    

    return (
        <>
    <main className="bg-secondary bg-secondary d-flex justify-content-center align-items-center">
        <section className="main-section">
          <div className="container-xl container-fluid">
            <div className="row mt-5">
              {inspirationData?.InspirationGalleryFind?.rows && inspirationData.InspirationGalleryFind.rows.length > 0 ? (
                inspirationData.InspirationGalleryFind.rows.map((row) => {
                  const slug = slugify(row?.fr_house_section?.title || '', {lower:true}); 

                  return (
                    <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12" key={row.id}>
                      <h3 className="my-3 detaillist text-uppercase text-center">{row?.fr_house_section?.title}</h3>
                      <a
                        href={`/inspiration/${slug}`}  
                        className="img-area text-decoration-none text-center mb-3"
                      >
                        <div className="mb-5">
                            {row?.file_image_url?.direct ? (
                                <Image
                                    src={`${row?.file_image_url?.direct}`}
                                    alt="gallery-category-images"
                                    className="img-fluid gallery-category-images"
                                    width={420}  
                                    height={280} 
                                />
                                ) : (
                                <img
                                    src="/Images/Property-1.jpg"  
                                    alt="gallery-category-images"
                                    className="img-fluid"
                                />
                            )}
                        </div>
                      </a>
                    </div>
                  );
                })
              ) : null}
            </div>
            <Pagination totalPages={totalPage} currentPage={currentPage} onPageChange={handlePageChange} totalCount={totalCount}/>
          </div>
        </section>
      </main>
    </>
    );
};

//export default Inspiration;
export default withAuth(Inspiration, routes.inspirations.auth, RoleEnum.CUSTOMER);
