import React from 'react';
import { HtmlContent } from './HtmlContent';

/**
 * Bootstrap Carousel Item
 */
export type BSCarouselItem =
    | {
          image: string;
          title?: string;
          content?: string;
      }
    | {
          title: string;
          content?: string;
      };

/**
 * Bootstrap Carousel Properties
 */
export type BSCarouselProps = {
    /**
     * Carousel ID, not required when only one instance
     */
    id?: string;

    /**
     * Carousel Items
     */
    items: BSCarouselItem[];

    /**
     * Carousel Interval, default is 5000
     */
    interval?: number;

    /**
     * Show Controls, default is true
     */
    controls?: boolean;

    /**
     * Show Indicators, default is true
     */
    indicators?: boolean;

    /**
     * Fade Effect, default is false
     */
    fade?: boolean;

    /**
     * Dark Theme, default is false
     */
    dark?: boolean;

    /**
     * Show Caption, default is true
     */
    caption?: boolean;

    /**
     * Caption Display Size
     */
    captionDisplay?: 'sm' | 'md' | 'lg' | 'xl';
};

/**
 * Bootstrap Carousel Component
 * @param props Properties
 * @returns Component
 */
export function BSCarousel(props: BSCarouselProps) {
    // Destruct
    const {
        id = 'carousel',
        items,
        interval,
        controls = true,
        indicators = true,
        fade = false,
        dark = false,
        caption = true,
        captionDisplay
    } = props;

    const target = `#${id}`;

    const classNames = ['carousel', 'slide'];
    if (fade) {
        classNames.push('carousel-fade');
    }
    if (dark) {
        classNames.push('carousel-dark');
    }

    // Layout
    return (
        <div id={id} className={classNames.join(' ')} data-bs-ride="carousel">
            {indicators && (
                <div className="carousel-indicators">
                    {items.map((item, index) => (
                        <button
                            key={index}
                            type="button"
                            data-bs-target={target}
                            data-bs-slide-to={index}
                            className={index === 0 ? 'active' : undefined}
                            aria-current={index === 0 ? 'true' : undefined}
                            aria-label={item.title}
                        ></button>
                    ))}
                </div>
            )}
            <div className="carousel-inner">
                {items.map((item, index) => {
                    const captions =
                        item.content && caption ? (
                            <div
                                className={
                                    captionDisplay
                                        ? `carousel-caption d-none d-${captionDisplay}-block`
                                        : 'carousel-caption d-block'
                                }
                            >
                                <h4>{item.title}</h4>
                                <HtmlContent innerHTML={item.content} />
                            </div>
                        ) : (
                            <React.Fragment />
                        );

                    return (
                        <div
                            key={index}
                            className={
                                index === 0
                                    ? 'carousel-item active'
                                    : 'carousel-item'
                            }
                            data-bs-interval={interval}
                        >
                            {'image' in item ? (
                                <React.Fragment>
                                    <img src={item.image} />
                                    {captions}
                                </React.Fragment>
                            ) : (
                                <div className="carousel-caption-only">
                                    {captions}
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
            {controls && (
                <React.Fragment>
                    <button
                        className="carousel-control-prev"
                        type="button"
                        data-bs-target={target}
                        data-bs-slide="prev"
                    >
                        <span
                            className="carousel-control-prev-icon"
                            aria-hidden="true"
                        ></span>
                        <span className="visually-hidden">Previous</span>
                    </button>
                    <button
                        className="carousel-control-next"
                        type="button"
                        data-bs-target={target}
                        data-bs-slide="next"
                    >
                        <span
                            className="carousel-control-next-icon"
                            aria-hidden="true"
                        ></span>
                        <span className="visually-hidden">Next</span>
                    </button>
                </React.Fragment>
            )}
        </div>
    );
}