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

import type { JSXElement } from "@coreai-ds/react-components";
import { TeachingPopover } from "@coreai-ds/react-components";
import { TeachingPopoverTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { TeachingPopoverSurface } from "@coreai-ds/react-components";
import { TeachingPopoverHeader } from "@coreai-ds/react-components";
import { TeachingPopoverCarousel } from "@coreai-ds/react-components";
import { TeachingPopoverCarouselCard } from "@coreai-ds/react-components";
import { TeachingPopoverBody } from "@coreai-ds/react-components";
import { Image } from "@coreai-ds/react-components";
import { TeachingPopoverTitle } from "@coreai-ds/react-components";
import { TeachingPopoverCarouselFooter } from "@coreai-ds/react-components";
import { TeachingPopoverCarouselNav } from "@coreai-ds/react-components";
import { TeachingPopoverCarouselNavButton } from "@coreai-ds/react-components";
import * as React from 'react';

const getAnnouncement = (newValue: string) => {
    return `Carousel slide ${newValue}`;
};

const swapImage = 'https://fabricweb.azureedge.net/fabric-website/assets/images/wireframe/image-square.png';

export const Carousel = (): JSXElement => (<TeachingPopover>
    <TeachingPopoverTrigger>
      <Button>TeachingPopover trigger</Button>
    </TeachingPopoverTrigger>
    <TeachingPopoverSurface>
      <TeachingPopoverHeader>Tips</TeachingPopoverHeader>
      <TeachingPopoverCarousel defaultValue={'1'} announcement={getAnnouncement}>
        <TeachingPopoverCarouselCard value="1">
          <TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage}/>}>
            <TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
            <div>This is page: 1</div>
          </TeachingPopoverBody>
        </TeachingPopoverCarouselCard>

        <TeachingPopoverCarouselCard value="2">
          <TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage}/>}>
            <TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
            <div>This is page: 2</div>
          </TeachingPopoverBody>
        </TeachingPopoverCarouselCard>

        <TeachingPopoverCarouselCard value="3">
          <TeachingPopoverBody media={<Image alt="test image" fit="cover" src={swapImage}/>}>
            <TeachingPopoverTitle>Teaching Bubble Title</TeachingPopoverTitle>
            <div>This is page: 3</div>
          </TeachingPopoverBody>
        </TeachingPopoverCarouselCard>

        <TeachingPopoverCarouselFooter next="Next" previous="Previous" initialStepText="Close" finalStepText="Finish">
          <TeachingPopoverCarouselNav>
            {index => <TeachingPopoverCarouselNavButton aria-label={`Tip ${index}`}/>}
          </TeachingPopoverCarouselNav>
        </TeachingPopoverCarouselFooter>
      </TeachingPopoverCarousel>
    </TeachingPopoverSurface>
  </TeachingPopover>);

export default Carousel;