import React, { FunctionComponent, useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import axios from 'axios';
import style from '../web.module.scss';

import { IContactQuestion } from '../models/IContactQuestion';

type ComponentProps = {
};

export const Contact: FunctionComponent<ComponentProps> = (props): JSX.Element => {
  const { t } = useTranslation();
  const [contactItems, setContactItems] = useState<IContactQuestion[]>([]);

  useEffect(() => {
    if (contactItems.length === 0) {
      const url = process.env.REACT_APP_API_URL;
      const apiUrl = `${url}api/contact`;
      axios.get(apiUrl)
      .then((response) => {
        if (response.data) {
          setContactItems(response.data);
        }
      });
    }
  }, [contactItems, setContactItems]);

  const renderQuestions = (): JSX.Element[] => {
    const result: JSX.Element[] = [];
    if (contactItems.length > 0) {
      contactItems.forEach((el: IContactQuestion) => {
        result.push(
          <div
            key={`contactItemsLoop-${el.id}`}
            className={style.characterBlock}
            style={{
              animationDelay:`${el.id*0.2}s`
            }}
          >
            <h4>{el.question}</h4>
            <hr />
            <div>{el.answer}</div>
          </div>
        );
      });
    }

    return result;
  };

  return (
    <div className={style.guideBody}>
      <h2>{t('qanda')}</h2>
      <hr />
      <div className={style.contactBox}>
        <a href='https://forms.gle/Dn4p7cFEPLK1zcTz5' rel='noopener noreferrer' target='_blank'>&nbsp;</a>
      </div>
      {renderQuestions()}
    </div>
  );
};
