// React
import React, { FC, useEffect } from 'react'
import { useParams } from 'react-router-dom'

// Redux
import { useDispatch, useSelector } from 'react-redux'
import { actionCreators as loaderActionCreators } from '../../../store/reducers/Loader'
import { actionCreators as blogItemActionCreators } from '../../../store/reducers/BlogItem'

import { Col, Container, Row } from 'reactstrap'

import { CommentsSection } from '../../../components/Comments'
import { Categories, Empty, Search } from '../../../components/SideWidgets'


import { ApplicationState } from '../../../store'
import { dateFormat } from '../../../functions'
import { ImageModel } from '../../../models'


interface BlogItemTitle {
  title?: string,
  postedOnBy? :string,
  badges? : string[],
  image?: ImageModel
}

const BlogTitleSection: FC<BlogItemTitle> = ({
  title = "",
  postedOnBy = "",
  badges = [],
  image = {
    src: "",
    alt: ""
  }
}) => {

  return <>
    <header className="mb-4">
      <h1 className="fw-bolder mb-1">{title}</h1>
      <div className="text-muted fst-italic mb-2">{postedOnBy ? postedOnBy : ''}</div>

      {badges ? badges.map((badge, index) => <a key={index} className="badge bg-secondary text-decoration-none link-light" href="#!">{badge}</a>) : <></>}
    </header>

    <figure className="mb-4">
      <img className="img-fluid rounded" {...image} />
    </figure>
  </>
}

const BlogItem = () => {
  const params = useParams()
  const dispatch = useDispatch()

  const { content, blogItem } = useSelector((state: ApplicationState) => state)
  const page = content?.blogItem

  useEffect(() => {
    if(params?.slug)
      dispatch(blogItemActionCreators.requestBlogItem({
        searchParams: {
          slug:  params.slug
        }
      }))
  }, [])

  useEffect(() => {
    blogItem?.isLoading
      ? dispatch(loaderActionCreators.show())
      : setTimeout(() => {
        dispatch(loaderActionCreators.hide())
      }, 1000)
  }, [blogItem?.isLoading])

  const blogItemTitle: BlogItemTitle = {
    title: blogItem?.title,
    postedOnBy: page?.titleSection?.postedOnBy,
    badges: blogItem?.badges,
    image: blogItem?.image
  }

  if(blogItemTitle.postedOnBy && blogItem?.created)
    blogItemTitle.postedOnBy = blogItemTitle.postedOnBy?.replace('{date}', dateFormat(blogItem.created))

  if(blogItemTitle.postedOnBy && blogItem?.author)
    blogItemTitle.postedOnBy = blogItemTitle.postedOnBy?.replace('{nickName}', dateFormat(blogItem.author.nickName))

  return <Container fluid className="mt-5">
    <Row>
      <Col lg="8">

        <article>
          <BlogTitleSection {...blogItemTitle} />
          <section className="mb-5" dangerouslySetInnerHTML={{ __html: blogItem?.text ? blogItem.text : '' }}></section>
        </article>

        <CommentsSection {...{
          staticContent: page?.commentsSection,
          items: blogItem?.comments
        }} />
      </Col>

      <Col lg="4">
        <Empty/>
      </Col>
    </Row>
  </Container>
}

export {
  BlogItem
}