import slugify from 'slugify';
import FloorPlanService, {FloorplanOPData} from "@/service/FloorPlanService";
import Image from 'next/image';
import { useState, useEffect } from 'react';
import { log } from 'console';

interface ListingProps {
    data: FloorplanOPData | undefined;  
}

const Listing:React.FC<ListingProps> = ({data}) => {
    const [isExpanded, setIsExpanded] = useState<boolean>(false);
    useEffect(() => {
        const collapseExampleElement = document.getElementById('collapseExample');
        
        if (!collapseExampleElement) return;
    
        const checkShowClass = () => {
          if (collapseExampleElement.classList.contains('show')) {
            setIsExpanded(true);
          } else {
            setIsExpanded(false);
          }
        };

        const observer = new MutationObserver(() => {
          checkShowClass(); 
        });
    
        observer.observe(collapseExampleElement, {
          attributes: true, 
          attributeFilter: ['class'], 
        });

        checkShowClass();

        return () => {
          observer.disconnect();
        };
      }, []);
      

    return (
      <div className="row property-grid-area">
      {data?.FloorPlanFind?.rows && data.FloorPlanFind.rows.length > 0 ? (
          data.FloorPlanFind.rows.map((row, index) => {
              const slug = row?.id 
  
              // Find if any attachment has the 'cover' property (assuming it is a boolean or indicator of the cover image)
              const coverAttachment = row?.fr_floor_plan_attachments?.find(attachment => attachment.cover !== null);
  
              return (
                  <div className="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12" key={index}>
                      <a 
                          href={`/plan-portfolio/${slug}`} 
                          className="card text-decoration-none border-0 bg-transparent property-card mb-3"
                      >
                          {
                              coverAttachment && coverAttachment?.file_attachment_url?.direct 
                              && typeof coverAttachment?.file_attachment_url?.direct === 'string' ? (
                                  <Image
                                      className={`card-img-top ${isExpanded ? 'expand' : ''}`}
                                      src={coverAttachment?.file_attachment_url?.direct}
                                      alt="floorplan image"
                                      width={590}
                                      height={400}
                                  />
                              ) : (
                                  <Image
                                      className={`card-img-top `}
                                      src="/Images/no_photo.jpg"  
                                      alt="no-img"
                                      width={590}
                                      height={400}
                                  />
                              )
                          }
                          <div className="card-body p-2 text-center">
                              <h4 className="card-title my-1 text-primary">{row.title}</h4>
                              <h5 className="card-title text-primary">{row.short_desc}</h5>
                          </div>
                      </a>
                  </div>
              );
          })
      ) : null}
  </div>
  
)};
export default Listing;