import React from 'react';
import { useSelector } from 'react-redux';
import { isEmpty } from 'lodash';
import { selectNewsSingle, selectSingleLoadingStatus } from '../store/news.selectors';
import { Spinner } from 'app/shared/components/spinner/spinner';
import * as Text from 'app/shared/components/text/text';

export const NewsSingle = () => {
  const news = useSelector(selectNewsSingle);
  const isLoading = useSelector(selectSingleLoadingStatus);

  if (isEmpty(news)) {
    return null;
  }

  const panelImageStyle = news?.leadingImage
    ? { backgroundImage: `url(${news.leadingImage})` }
    : {};

  return (
    <>
      {isLoading ? <Spinner /> :
        <div className="o-layout o-layout--vertical c-news-single">
          {news && <>
            <div className="">
              <Text.Label extraClass="u-margin-bottom--small">
                {news.publishDate}
              </Text.Label>
            </div>
            <div className="o-layout u-font-weight--bold">
              <Text.Headline size='h1' extraClass="c-news-single__title u-margin-bottom">
                {news.title}
              </Text.Headline>
            </div>
            <div className="c-news-single__image c-news-single__image--placeholder" style={panelImageStyle} />
            <div>
              <Text.Headline size='h2' extraClass='u-display-md--flex'>
                {news.summary}
              </Text.Headline>
            </div>
            <div className='c-news-single__content' dangerouslySetInnerHTML={{ __html: news?.content }} />
          </>}
        </div>}
    </>
  );
};