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

import * as React from 'react';
import { Field } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { CarouselNav } from "@coreai-ds/react-components";
import { CarouselNavImageButton } from "@coreai-ds/react-components";
import { CarouselNavButton } from "@coreai-ds/react-components";

export const Default = () => {
    const swapImage = 'https://fabricweb.azureedge.net/fabric-website/assets/images/wireframe/image-square.png';
    const [useImageButtons, setUseImageButtons] = React.useState(false);
    const styles = /* css */ `
      .carousel-nav-default-example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        box-shadow: var(--shadow16);
      }

      .carousel-nav-default-example__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3);
        border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
        padding: 10px;
        min-height: 100px;
      }

      .carousel-nav-default-example__controls {
        display: flex;
        flex-direction: column;
        border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3);
        border-bottom: none;
        border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0;
        padding: 10px;
      }

      .carousel-nav-default-example__field {
        flex: 1;
        grid-template-columns: max-content 1fr;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="carousel-nav-default-example">
          <div className="carousel-nav-default-example__controls">
            <Field className="carousel-nav-default-example__field" label={<>
                  Use <code>CarouselNavImageButton</code>
                </>} orientation="horizontal">
              <Switch checked={useImageButtons} onChange={(_, data) => setUseImageButtons(data.checked)}/>
            </Field>
          </div>
          <div className="carousel-nav-default-example__card">
            <CarouselNav totalSlides={5} appearance="brand">
              {(index) => useImageButtons ? (<CarouselNavImageButton image={{ src: swapImage }} aria-label={`Carousel Nav Button ${index}`}/>) : (<CarouselNavButton aria-label={`Carousel Nav Button ${index}`}/>)}
            </CarouselNav>
          </div>
        </div>
      </>);
};

export default Default;