import React, { useState } from 'react';
import classnames from 'classnames';
import * as Text from 'app/shared/components/text/text';


interface Props {
  question: string,
  answer: string,
}

export const FaqItem = ({ question, answer }: Props) => {
  const [ showAnswer, setShowAnswer ] = useState(false);
  const [ answerShowIcon, answerHideIcon ] = [ 'icon-flat-arrow-down', 'icon-flat-arrow-up' ];
  const [ answerIcon, setAnswerIcon ] = useState(answerShowIcon);

  const toggle = (event) => {
    event.preventDefault();

    setShowAnswer(!showAnswer);
    setAnswerIcon(showAnswer ? answerShowIcon : answerHideIcon);
  };

  const createUserProvidedMarkup = () => {
    // XSS! https://reactjs.org/docs/dom-elements.html
    return {
      __html: answer,
    };
  };

  return <div className={'o-layout u-flex-column c-faq-item'}>
    <div className='o-layout u-justify-content-between u-cursor--pointer' onClick={toggle}>
      <div className='o-layout'>
        <Text.Paragraph size='large' extraClass='u-margin-bottom--none c-faq-item__question-text'>{question}</Text.Paragraph>
      </div>
      <i className={classnames('o-layout c-faq-item__icon', 'js-hit-area', answerIcon)} />
    </div>
    <div className={'c-faq-item__content u-margin-top--big'} hidden={!showAnswer} dangerouslySetInnerHTML={createUserProvidedMarkup()} />
  </div>;
};