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

import { Text } from "@coreai-ds/react-components";
import type { CardProps } from "@coreai-ds/react-components";
import * as React from 'react';
import { Card } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MoreHorizontal20Regular } from "@fluentui/react-icons";

export const Appearance = () => {
    const resolveAsset = (asset: string) => {
        const assetUrl = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
        return `${assetUrl}${asset}`;
    };
    const ExampleHeader = ({ title, description }: Record<string, string>) => (<header>
        {title ? (<Text as="h4" preset="heading3" block className="card-appearance-example__title">
            {title}
          </Text>) : null}
        {description ? (<Text as="p" preset="body" block className="card-appearance-example__description">
            {description}
          </Text>) : null}
      </header>);
    const CardExample = (props: CardProps) => {
        const onClick = React.useCallback(() => console.log('Interactive!'), []);
        return (<Card {...props} className="card-appearance-example__card" onClick={onClick}>
          <CardHeader image={<img className="card-appearance-example__logo" src={resolveAsset('app_logo.svg')} alt="App name logo"/>} header={<Text as="h5" className="card-appearance-example__app-name" weight="semibold">
                App Name
              </Text>} description={<Text preset="bodyS" className="card-appearance-example__caption">
                Developer
              </Text>} action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options"/>}/>
          <p className="card-appearance-example__text">
            Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry
            jujubes toffee sugar plum.
          </p>
        </Card>);
    };
    const styles = /* css */ `
      .card-appearance-example {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 36px;
      }

      .card-appearance-example__title,
      .card-appearance-example__description {
        margin: 0 0 var(--spacingVerticalM);
      }

      .card-appearance-example__card {
        height: fit-content;
        max-width: 480px;
        width: 100%;
      }

      .card-appearance-example__caption {
        color: var(--colorNeutralForeground3);
      }

      .card-appearance-example__logo {
        border-radius: var(--borderRadiusMedium);
        height: 48px;
        width: 48px;
      }

      .card-appearance-example__app-name,
      .card-appearance-example__text {
        margin: 0;
      }

      .card-appearance-example__filled-section {
        background-color: var(--colorNeutralBackground3);
        margin-inline: -48px;
        padding-block: var(--spacingVerticalXL);
        padding-inline: 48px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="card-appearance-example">
          <section>
            <ExampleHeader title="Filled Alternative (CoreAI Default)" description="Under the CoreAI theme, Card defaults to `filled-alternative`. Use this for most card
              designs when displayed on a lighter gray or white surface to ensure adequate contrast between the card
              surface and the application background."/>
            <CardExample appearance="filled-alternative"/>
          </section>

          <section className="card-appearance-example__filled-section">
            <ExampleHeader title="Filled (on colorNeutralBackground3)" description="The stock Fluent default style. Explicitly opt in to `filled` when you want the original
              filled treatment instead of the CoreAI default."/>
            <CardExample appearance="filled"/>
          </section>

          <section>
            <ExampleHeader title="Outline" description="Use when you don't want a filled background color but a discernable outline (border) on the
              card."/>
            <CardExample appearance="outline"/>
          </section>

          <section>
            <ExampleHeader title="Subtle" description="This variant doesn't have a background or border for the card container. However, it does include
              interaction states that display a visible footprint when interacting with the card item."/>
            <CardExample appearance="subtle"/>
          </section>
        </div>
      </>);
};

export default Appearance;