import React, { useRef } from 'react';
import { FaqCategory } from 'app/modules/faq/components/faqCategory';
import { selectCategories } from '../store/faq.selectors';
import { useSelector } from 'react-redux';
import { FaqScrollMenu } from './faqScrollMenu';

export const Faq = () => {
  const categories = useSelector(selectCategories);
  const ref = useRef<HTMLDivElement>(null);
  const executeScroll = (elementName) => {
    ref.current?.children.namedItem(elementName)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div ref={ref} className='o-main-column o-gutter-left o-gutter-right o-gutter-left-md--big o-gutter-right-md--big'>
      {categories.length > 1 && <FaqScrollMenu categories={categories} onClick={executeScroll} />}
      {categories.map(category => 
        <FaqCategory key={category.id} categoryName={category.name} questions={category.items} />)
      }
    </div>
  );
};