import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import parse from 'html-react-parser';
import { withRouter } from 'react-router-dom';
import article from 'store/article';
import config from 'config/general';
import styleIdentifiers from './CustomArticle.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface CustomArticleProps {}

const CustomArticle = (props: CustomArticleProps) => {
  const {
    nodeItem,
    wrapperComponent,
    className,
    wrapperClassName,
    containerClassName,
    paramKey,
    customNode,
    match: { params },
    ...rest
  } = props;

  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const detail = useSelector((state: StoreState) => state.article.detail?.data);
  // Allow to dispatch actions
  const dispatch = useDispatch();
  const loadArticle = data => dispatch(article.actions.getOneArticle.request.action(data));

  function removeStyle(toRemove) {
    for (let index = 0; index < toRemove.length; index++) {
      const element = toRemove[index];
      if (element && element.attribs && element.attribs.style) {
        element.attribs.style = null;
      }
    }

    return toRemove;
  }

  function renderContent(content): JSX {
    const newContent = content;

    const options = {
      replace: (domNode): JSX => {
        if (nodeItem && customNode && customNode.includes(domNode.name)) {
          const NodeItem = nodeItem;
          return <NodeItem {...domNode} />;
        }
        return null;
      },
    };

    return parse(newContent, options);
  }

  useEffect(() => {
    if (detail?.urls?.[lg] !== params[paramKey || 'url'] || detail?.urls?.[config.defaultLanguage] !== params[paramKey || 'url']) {
      loadArticle({
        data: { url: params[paramKey], lg },
        noFeedback: true,
        callbackError: () => {
          loadArticle({ data: { url: params[paramKey], lg: config.defaultLanguage }, noFeedback: true });
        },
      });
    }
  }, [params]);

  const WrapperComponent = wrapperComponent;

  return (
    <div className={styles('custom-article', containerClassName)}>
      <div className={styles('CustomArticle', wrapperClassName)}>
        {WrapperComponent ? (
          <WrapperComponent item={detail} {...rest}>
            <div className={styles('content-artice', className)}>
              {detail ? renderContent(detail.content[lg] || detail.content[config.defaultLanguage]) : <div>Loading ...</div>}
            </div>
          </WrapperComponent>
        ) : (
          <div className={styles('content-artice', className)}>
            {detail ? renderContent(detail.content[lg] || detail.content[config.defaultLanguage]) : <div>Loading ...</div>}
          </div>
        )}
      </div>
    </div>
  );
};

export default withRouter(CustomArticle);