"use client";

import { useCallback, useState } from "react";
import { Col, Container, Form, Image, Row } from "react-bootstrap";
import Link from "next/link";
import styles from "@/styles/Component/Blog/Blog.module.scss";
import { SuspenseLoader } from "@/components/App/Loader";
import useFetchData from "@/components/App/useFetchData";
import { debounce } from "@/utils/helpers";

interface BlogListResponse {
  id: number;
  title: string;
  name: string;
  content_type: string | null;
  slug: string;
  short_descriptioin: string | null;
  meta_title: string;
  meta_keyword: string;
  meta_description: string;
  description: string;
  cover_letter: string;
  status: string;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}
function Blog() {
  const [search, setSearch] = useState("");
  const { data, isLoading } = useFetchData<BlogListResponse[]>(
    "BLOG_LIST",
    {
      filter: search
    },
    [search]
  );

  //debounce
  const debouncedSearch = useCallback((value: string) => {
    setSearch(value);
  }, []);

  const debouncedSearchWithDelay = debounce(debouncedSearch, 200);

  return (
    <div className={styles.BlogBlock}>
      <Container className="bigContainer">
        <h1>Blogs</h1>
        <Row>
          <Col md={4} lg={4} xl={3}>
            <div className={styles.BlogLeftInfo}>
              <div className={styles.BlogSearchCard}>
                <h4>Search The Blog</h4>
                <Form.Control
                  type="text"
                  className={styles.ContactInput}
                  placeholder="Search …"
                  // value={search}
                  onChange={e => debouncedSearchWithDelay(e.target.value)}
                />
              </div>
            </div>
          </Col>
          <Col md={8} lg={8} xl={9}>
            {!isLoading ? (
              <div className={styles.BlogRightInfo}>
                <Row>
                  {Array.isArray(data) && data.length > 0 ? (
                    data.map(blog => (
                      <Col md={12} lg={6} xl={6} key={blog.id}>
                        <div className={styles.BlogInfoCard}>
                          <div className={styles.BlogInfoImg}>
                            <Image
                              src={
                                blog.cover_letter
                                  ? `/images/images/blogs/coverletter/${blog.cover_letter}`
                                  : "/assets/noimg.png"
                              }
                              alt={blog.title}
                            />
                          </div>
                          <div className={styles.BlogInfo}>
                            <h4>
                              <Link href={`/blogs/${blog.id}`}>
                                {blog.title}
                              </Link>
                            </h4>
                            <ul className="d-flex align-items-center flex-wrap">
                              <li>
                                <i>
                                  <Image src="/assets/icon05.png" alt="Date" />
                                </i>
                                {new Date(blog.created_at).toLocaleDateString()}
                              </li>
                            </ul>
                            <p>
                              {blog.description
                                ? blog.description.length > 100
                                  ? blog.description.substring(0, 100) + "..."
                                  : blog.description
                                : "No description available."}
                            </p>
                            <Link
                              href={`/blogs/${blog.id}`}
                              className={styles.ReadMore}
                            >
                              Read More
                            </Link>
                          </div>
                        </div>
                      </Col>
                    ))
                  ) : (
                    <p>No blogs found</p>
                  )}
                </Row>
              </div>
            ) : (
              <SuspenseLoader />
            )}
          </Col>
        </Row>
      </Container>
    </div>
  );
}

// <CustomPagination totalResults={190} itemsPerPage={10} />
// const CustomPagination = ({ totalResults, itemsPerPage }) => {
//   const [active, setActive] = useState(1);
//   const totalPages = Math.ceil(totalResults / itemsPerPage);

//   const handlePageChange = pageNumber => {
//     setActive(pageNumber);
//     console.log(`Fetching data for page ${pageNumber}`);
//   };

//   return (
//     <div className="pagination-container">
//       <Pagination className="custom-pagination">
//         <Pagination.Prev
//           onClick={() => active > 1 && handlePageChange(active - 1)}
//           disabled={active === 1}
//         >
//           &lt; Prev
//         </Pagination.Prev>

//         {[...Array(Math.min(totalPages, 4))].map((_, index) => (
//           <Pagination.Item
//             key={index + 1}
//             active={index + 1 === active}
//             onClick={() => handlePageChange(index + 1)}
//           >
//             {index + 1}
//           </Pagination.Item>
//         ))}

//         <Pagination.Next
//           onClick={() => active < totalPages && handlePageChange(active + 1)}
//           disabled={active === totalPages}
//         >
//           Next &gt;
//         </Pagination.Next>
//       </Pagination>

//       <p className="total-results">Total {totalResults} results found</p>
//     </div>
//   );
// };

export default Blog;