import React from 'react'

import './styles.scss'

import { Scrollchor } from 'react-scrollchor'

interface ChapterNavigationI {
  /** Array of content objects. Each object needs a name and a id property. Name is shown and the id is the id of the anchor link to scroll to. */
  content?: { name: string; id: string; [key: string]: any }[]
  /** title to show above the navigation */
  title?: string
  /** hides first entry in content-array */
  hideFirstEntry?: boolean
  /** hides arrows */
  hideArrows?: boolean
  /** custom css-classname for navigation container */
  className?: string
  /** does a jump instead of scrolling */
  jump?: boolean
}
/**
 * Displays a navigation for different parts of on article. To use it mark target elements with the same id-property
 *
 */
export const ChapterNavigation = ({
  content,
  title,
  hideFirstEntry,
  hideArrows,
  className = 'cbChapterNavigation',
  jump,
}: ChapterNavigationI) => {
  if (!content) {
    return (
      <div className='cbChapterNavigation cbPlaceholder'>
        <div className='title'>{title || 'Kapitel-Navigation'}</div>
        <div className='entry'>
          <div className='chapter'>
            <div className='name'>Kapitel 1</div>
            {!hideArrows && (
              <div className='icon'>
                <i className='arrow alternate down icon' />
              </div>
            )}
          </div>
        </div>
        <div className='entry'>
          <div className='chapter'>
            <div className='name'>Kapitel 2</div>
            {!hideArrows && (
              <div className='icon'>
                <i className='arrow alternate down icon' />
              </div>
            )}
          </div>
        </div>
        <div className='entry'>
          <div className='chapter'>
            <div className='name'>Kapitel 3</div>
            {!hideArrows && (
              <div className='icon'>
                <i className='arrow alternate down icon' />
              </div>
            )}
          </div>
        </div>
      </div>
    )
  }
  return (
    <div className={className}>
      {title && <div className='title'>{title}</div>}
      {content.map((chapter, i) => {
        if (i === 0 && hideFirstEntry) return
        return (
          <Scrollchor
            to={chapter.id}
            key={i}
            // animate={jump ? { offset:0 , duration: 0 ,easing:()=>{}}:undefined}
            className='entry'
          >
            <div className='chapter'>
              <div className='name'>{chapter.name}</div>
              {!hideArrows && (
                <div className='icon'>
                  <i className='arrow alternate down icon' />
                </div>
              )}
            </div>
          </Scrollchor>
        )
      })}
    </div>
  )
}