// 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 { TeachingPopoverCarouselPageCount } from "@coreai-ds/react-components";
import * as React from 'react';

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

export const CarouselText = (): JSXElement => (<TeachingPopover>
    <TeachingPopoverTrigger>
      <Button>TeachingPopover trigger</Button>
    </TeachingPopoverTrigger>
    <TeachingPopoverSurface>
      <TeachingPopoverHeader>Tips"</TeachingPopoverHeader>
      <TeachingPopoverCarousel defaultValue="1">
        <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">
          <TeachingPopoverCarouselPageCount>
            {(currentIndex: number, totalPages: number) => `${currentIndex} of ${totalPages}`}
          </TeachingPopoverCarouselPageCount>
        </TeachingPopoverCarouselFooter>
      </TeachingPopoverCarousel>
    </TeachingPopoverSurface>
  </TeachingPopover>);

export default CarouselText;