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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import { Subtitle1 } from "@coreai-ds/react-components";
import { Card } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Caption1 } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MoreHorizontal20Regular } from "@fluentui/react-icons";
import { CardPreview } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    main: {
        gap: '36px',
        display: 'flex',
        flexDirection: 'column',
        flexWrap: 'wrap',
    },
    card: {
        width: '100%',
        height: 'fit-content',
    },
    section: {
        maxWidth: '360px',
        width: '100%',
    },
    title: { margin: '0 0 12px' },
    horizontalCardImage: {
        width: '64px',
        height: '64px',
    },
    headerImage: {
        borderRadius: '4px',
        maxWidth: '44px',
        maxHeight: '44px',
    },
    caption: {
        color: tokens.colorNeutralForeground3,
    },
    text: { margin: '0' },
});

const Title = ({ children }: React.PropsWithChildren<{}>) => {
    const styles = useStyles();
    return (<Subtitle1 as="h4" block className={styles.title}>
      {children}
    </Subtitle1>);
};

const resolveAsset = (asset: string) => {
    const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
    return `${ASSET_URL}${asset}`;
};

export const Orientation = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.main}>
      <section className={styles.section}>
        <Title>'vertical' (Default)</Title>
        <p>With image as part of header</p>

        <Card className={styles.card}>
          <CardHeader image={<img className={styles.headerImage} src={resolveAsset('app_logo.svg')} alt="App Name Document"/>} header={<Text as="h5" weight="semibold" style={{ margin: 0 }}>
                App Name
              </Text>} description={<Caption1 className={styles.caption}>Developer</Caption1>} action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options"/>}/>

          <p className={styles.text}>
            Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar
            plum.
          </p>
        </Card>
      </section>

      <section className={styles.section}>
        <Title>'horizontal'</Title>
        <p>With image as part of preview</p>

        <Card className={styles.card} orientation="horizontal">
          <CardPreview className={styles.horizontalCardImage}>
            <img className={styles.horizontalCardImage} src={resolveAsset('app_logo.svg')} alt="App Name Document"/>
          </CardPreview>

          <CardHeader header={<Text weight="semibold">App Name</Text>} description={<Caption1 className={styles.caption}>Developer</Caption1>} action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options"/>}/>
        </Card>
      </section>
    </div>);
};

export default Orientation;