import React, { createContext } from 'react'

import { ContentTree } from '@financial-times/content-tree'
import { Button } from '@financial-times/o3-button'

import { ContentProps } from '../../types'

/** There may or may not be a main carousel heading. In order to get the heading level correct for the headings in individual carousel cards, we capture what heading levels they should have in context */
export const CarouselCardHeadingLevelContext = createContext<2 | 3>(3)
interface CarouselProps extends ContentProps<ContentTree.transit.Carousel> {}

/**
 * Renders a Carousel component
 *
 */

const Carousel: React.FC<React.PropsWithChildren<CarouselProps>> = ({
  content: { title, standfirst, id },
  children,
}) => {
  const cardHeadingLevel: 2 | 3 = title ? 3 : 2
  return (
    <CarouselCardHeadingLevelContext.Provider value={cardHeadingLevel}>
      <section
        className="cp-carousel__wrapper"
        data-component="carousel-wrapper"
      >
        {title && (
          <h2 className="o3-type-title-md cp-carousel__title">{title}</h2>
        )}
        {standfirst && (
          <p className="o3-type-body-lg cp-carousel__standfirst">
            {standfirst}
          </p>
        )}
        {React.Children.count(children) > 0 && (
          <div
            className="cp-carousel__container"
            data-component="carousel"
            data-component-id={id}
          >
            <ul className="cp-carousel__cards">{children}</ul>
          </div>
        )}
        <div className="cp-carousel__progress">
          <div
            className="cp-carousel__progress__indicator"
            aria-hidden="true"
          ></div>
          <div className="cp-carousel__progress__buttons">
            <Button
              label="left"
              type="secondary"
              icon="chevron-left"
              iconOnly={true}
              attributes={{
                'data-trackable': 'carousel-arrow-left',
                'data-button': 'carousel-button-left',
              }}
            />
            <Button
              label="right"
              type="secondary"
              icon="chevron-right"
              iconOnly={true}
              attributes={{
                'data-trackable': 'carousel-arrow-right',
                'data-button': 'carousel-button-right',
              }}
            />
          </div>
        </div>
      </section>
    </CarouselCardHeadingLevelContext.Provider>
  )
}

export default Carousel