// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { CarouselAnnouncerFunction } from "@coreai-ds/react-components";
import { Carousel } from "@coreai-ds/react-components";
import { CarouselViewport } from "@coreai-ds/react-components";
import { CarouselSlider } from "@coreai-ds/react-components";
import { CarouselCard } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { CarouselNavContainer } from "@coreai-ds/react-components";
import { CarouselNav } from "@coreai-ds/react-components";
import { CarouselNavButton } from "@coreai-ds/react-components";
export const Default = () => {
    const images = [
        'https://fabricweb.azureedge.net/fabric-website/assets/images/swatch-picker/sea-full-img.jpg',
        'https://fabricweb.azureedge.net/fabric-website/assets/images/swatch-picker/bridge-full-img.jpg',
        'https://fabricweb.azureedge.net/fabric-website/assets/images/swatch-picker/park-full-img.jpg',
        'https://fabricweb.azureedge.net/fabric-website/assets/images/swatch-picker/sea-full-img.jpg',
        'https://fabricweb.azureedge.net/fabric-website/assets/images/swatch-picker/bridge-full-img.jpg',
        'https://fabricweb.azureedge.net/fabric-website/assets/images/swatch-picker/park-full-img.jpg',
    ];
    const getAnnouncement: CarouselAnnouncerFunction = (index, totalSlides) => `Carousel slide ${index + 1} of ${totalSlides}`;
    const styles = /* css */ `
      .carousel-default-example__card {
        align-content: center;
        height: 450px;
        text-align: left;
        position: relative;
      }

      .carousel-default-example__content {
        display: flex;
        flex-direction: column;
        gap: var(--spacingHorizontalS);
        position: absolute;
        left: 10%;
        top: 25%;
        background: var(--colorNeutralBackground1);
        padding: 18px;
        max-width: 270px;
        width: 50%;
      }

      .carousel-default-example__title {
        font-family: var(--fontFamilyBase);
        font-size: var(--fontSizeBase600);
        font-weight: var(--fontWeightSemibold);
        line-height: var(--lineHeightBase600);
      }

      .carousel-default-example__subtext {
        font-family: var(--fontFamilyBase);
        font-size: var(--fontSizeBase300);
        font-weight: var(--fontWeightRegular);
        line-height: var(--lineHeightBase300);
      }
    `;
    return (<>
        <style>{styles}</style>
        <Carousel groupSize={1} circular announcement={getAnnouncement}>
          <CarouselViewport>
            <CarouselSlider>
              {images.map((imageSrc, index) => (<CarouselCard key={`image-${index}`} className="carousel-default-example__card" aria-label={`${index + 1} of ${images.length}`} id={`components-carousel-carousel--default-test-${index}`}>
                  <Image fit="cover" src={imageSrc} role="presentation"/>

                  <div className="carousel-default-example__content">
                    <div className="carousel-default-example__title">Card {index + 1}</div>
                    <div className="carousel-default-example__subtext">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                    </div>
                    <div>
                      <Button size="small" shape="square" appearance="primary">
                        Call to action
                      </Button>
                    </div>
                  </div>
                </CarouselCard>))}
            </CarouselSlider>
          </CarouselViewport>
          <CarouselNavContainer layout="inline" autoplayTooltip={{ content: 'Autoplay', relationship: 'label' }} nextTooltip={{ content: 'Go to next', relationship: 'label' }} prevTooltip={{ content: 'Go to prev', relationship: 'label' }}>
            <CarouselNav>
              {(index) => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`}/>}
            </CarouselNav>
          </CarouselNavContainer>
        </Carousel>
      </>);
};

export default Default;