'use client'
import React, { useRef } from 'react'
import { BlogListSection } from './Style'
import { Col, Container, Row } from 'react-bootstrap'
import Link from 'next/link'
import { FlexBox } from '../../common/HOC'
import H5 from '../../common/H5'
import P from '../../common/P'
import IconRightArrow from '@/public/assets/icons/icon-right-pink.svg'
import { useState } from 'react'
import { useEffect } from 'react'
import { blogDataListWlcomePage } from '@/app/ApiCallingFunction/Function'
import { formatDateToMonthShortwithFormateForformfield } from '@/app/ApiCallingFunction/CommonCallingFunction'
import CommonPagination from '../../CommonPagination'
import asyncblogs from '../../../../../redux/thunks/blogs.thunk'
import { useDispatch, useSelector } from 'react-redux'
import Skeleton from 'react-loading-skeleton'

const BlogList = () => {
    const [page, setpage] = useState(1)
    const blogshow = useRef(null)
    const dispatch = useDispatch()
    useEffect(() => {
        console.log(blogshow)
        dispatch(
            asyncblogs({
                page: page,
                limit: 9,
                search: '',
                sortKey: '',
                sortBy: ''
            })
        )
    }, [page])
    const { loading, data } = useSelector((pre) => pre.blogs)

    return (
        <BlogListSection className="pt-60 pb-100">
            <Container>
                <Row>
                    {loading ? (
                        Array.from({ length: 6 }).map((_, i) => {
                            return (
                                <Col
                                    lg="4"
                                    md="6"
                                    sm="6"
                                    className="blog-col"
                                    key={i}
                                >
                                    <div className="blog-card skeleton">
                                        <FlexBox className="blog-image ">
                                            <Skeleton
                                                width="100%"
                                                height="100%"
                                                count={1}
                                            />
                                        </FlexBox>
                                        <div className="blog-content">
                                            <Skeleton
                                                width={70}
                                                height={10}
                                                count={1}
                                                className="mb-2"
                                            />
                                            <Skeleton
                                                width="100%"
                                                height={15}
                                                count={1}
                                                className="mb-3"
                                            />
                                            <Skeleton
                                                width="100%"
                                                height={10}
                                                count={3}
                                            />
                                            <Skeleton
                                                width={100}
                                                height={15}
                                                count={1}
                                                className="mt-3"
                                            />
                                        </div>
                                    </div>
                                </Col>
                            )
                        })
                    ) : (
                        <>
                            {data?.data?.map((list, i) => {
                                return (
                                    <Col
                                        lg="4"
                                        md="6"
                                        sm="6"
                                        className="blog-col"
                                        key={i}
                                    >
                                        <div className="blog-card" href="/">
                                            <FlexBox className="blog-image">
                                                <img
                                                    src={list?.image}
                                                    alt={list.alt}
                                                    onError={(e) => {
                                                        e.target.src =
                                                            `${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/images/blog-image.png`
                                                    }}
                                                />
                                            </FlexBox>
                                            <div className="blog-content">
                                                <P
                                                    className="small-16 date"
                                                    text={formatDateToMonthShortwithFormateForformfield(
                                                        list?.createdAt
                                                    )}
                                                />
                                                <H5 text={list?.blogTitle} />
                                                <P
                                                    text={list?.description?.replace(
                                                        /(<([^>]+)>)/gi,
                                                        ''
                                                    )}
                                                />
                                                {/* {
                                                    console.log(list?.description,"list?.description")
                                                } */}
                                                {/* <div
                                                    ref={blogshow}
                                                    dangerouslySetInnerHTML={{
                                                        __html: list?.description
                                                    }}
                                                ></div> */}
                                                <Link
                                                    href={`/blog/${list?.blogSlug}`}
                                                    // href={{
                                                    //     pathname: `/blog/${query}`,
                                                    //     query: { blogId: list?.blogId }
                                                    // }}
                                                    className="link"
                                                >
                                                    Read More <IconRightArrow />
                                                </Link>
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })}
                        </>
                    )}
                </Row>
                {data?.meta?.totalCount > 9 && (
                    <CommonPagination
                        current={page}
                        onChangePage={(value) => setpage(value)}
                        total={Math.ceil(data?.meta?.totalCount / 9)}
                    />
                )}
            </Container>
        </BlogListSection>
    )
}

export default BlogList