import React, { useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Accordion } from 'react-bootstrap';
import Linkify from 'react-linkify';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Card from '../../styled/Card';
import TitleChart from '../../styled/TitleChart';
// import { noString } from '../../../utils';


const AccordionToggle = styled(Accordion.Toggle)`
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  
  ${({ theme: { blue4 } }) => css`
    &:hover {
      background-color: ${blue4};
      border-color: ${blue4};
    }
  `}
`;

const parseParagraphs = (string) => {
  let str = string;
  str = str.replace(/\r\n\r\n/g, '</p><p>').replace(/\n\n/g, '</p><p>');
  str = str.replace(/\r\n/g, '<br />').replace(/\n/g, '<br />');
  return str;
};

const linkify = (text) => ReactDOMServer.renderToStaticMarkup(
  <Linkify
    componentDecorator={(decoratedHref, decoratedText, key) => (
      <a
        target="blank"
        rel="noopener noreferrer"
        href={decoratedHref}
        key={key}
      >
        {decoratedText}
      </a>
    )}
  >
    {text}
  </Linkify>,
);

const Description = ({ title, desc, className }) => {
  const [currEventKey, setCurrEventKey] = useState(null);


  return (
    <Accordion className={className} onSelect={setCurrEventKey}>
      <Card>
        <Card.Header as={AccordionToggle} eventKey="0">
          <TitleChart>
            { title }
          </TitleChart>
          <FontAwesomeIcon
            icon={currEventKey === '0' ? 'chevron-up' : 'chevron-down'}
          />
        </Card.Header>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <div
              dangerouslySetInnerHTML={{ __html: parseParagraphs(linkify(desc)) }}
              className="w-75"
            />
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
};

Description.propTypes = {
  className: PropTypes.string,
  title: PropTypes.string,
  desc: PropTypes.string,
};
Description.defaultProps = {
  className: '',
  title: 'No title',
  desc: 'No description',
};

export default Description;