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

import type { JSXElement } from "@coreai-ds/react-components";
import { Carousel } from "@coreai-ds/react-components";
import type { CarouselAnnouncerFunction } from "@coreai-ds/react-components";
import { CarouselViewport } from "@coreai-ds/react-components";
import { CarouselSlider } from "@coreai-ds/react-components";
import * as React from 'react';
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { typographyStyles } 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";
const getAnnouncement: CarouselAnnouncerFunction = (index: number, totalSlides: number) => {
    return `Elevated carousel slide ${index + 1} of ${totalSlides}`;
};
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 useClasses = makeStyles({
    bannerCard: {
        alignContent: 'center',
        height: '450px',
        textAlign: 'left',
        position: 'relative',
    },
    cardContainer: {
        display: 'flex',
        flexDirection: 'column',
        gap: '8px',
        position: 'absolute',
        left: '10%',
        top: '25%',
        background: tokens.colorNeutralBackground1,
        padding: '18px',
        maxWidth: '270px',
        width: '50%',
    },
    title: {
        ...typographyStyles.title1,
    },
    subtext: {
        ...typographyStyles.body1,
    },
});
const BannerCard: React.FC<{
    children: React.ReactNode;
    imageSrc: string;
    index: number;
}> = props => {
    const { children, imageSrc, index } = props;
    const classes = useClasses();
    return (<CarouselCard className={classes.bannerCard} aria-label={`${index + 1} of ${IMAGES.length}`} id={`components-carousel-carousel--appearance-test-${index}`}>
      <Image fit="cover" src={imageSrc} role="presentation"/>

      <div className={classes.cardContainer}>
        <div className={classes.title}>{children}</div>
        <div className={classes.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>);
};
export const Appearance = (): JSXElement => (<Carousel appearance="elevated" groupSize={1} circular announcement={getAnnouncement}>
    <CarouselViewport>
      <CarouselSlider>
        {IMAGES.map((imageSrc, index) => (<BannerCard key={`image-${index}`} imageSrc={imageSrc} index={index}>
            Card {index + 1}
          </BannerCard>))}
      </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 Appearance;