// 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 type { CardProps } 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 { mergeClasses } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    main: {
        display: 'flex',
        flexDirection: 'column',
        flexWrap: 'wrap',
        columnGap: '16px',
        rowGap: '36px',
    },
    title: { margin: '0 0 12px' },
    card: {
        maxWidth: '300px',
        width: '100%',
        height: 'fit-content',
    },
    flex: {
        gap: '4px',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    appIcon: {
        borderRadius: '4px',
        height: '32px',
    },
    caption: {
        color: tokens.colorNeutralForeground3,
    },
    cardFooter: {
        alignItems: 'center',
        justifyContent: 'space-between',
    },
});

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}`;
};

const CardExample = (props: CardProps) => {
    const styles = useStyles();
    return (<Card className={styles.card} {...props}>
      <header className={styles.flex}>
        <img className={styles.appIcon} src={resolveAsset('logo.svg')} alt="Application one logo"/>
        <img className={styles.appIcon} src={resolveAsset('logo2.svg')} alt="Application two logo"/>
      </header>

      <CardHeader header={<Text as="h5" weight="semibold" style={{ margin: 0 }}>
            Alert in Teams when a new document is uploaded in channel
          </Text>} description={<Caption1 className={styles.caption}>By Microsoft</Caption1>}/>

      <footer className={mergeClasses(styles.flex, styles.cardFooter)}>
        <span>Automated</span>
        <span>3290</span>
      </footer>
    </Card>);
};

export const Size = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.main}>
      <section>
        <Title>'small'</Title>
        <CardExample size="small"/>
      </section>

      <section>
        <Title>'medium' (Default)</Title>
        <CardExample size="medium"/>
      </section>

      <section>
        <Title>'large'</Title>
        <CardExample size="large"/>
      </section>
    </div>);
};

export default Size;