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

const useStyles = makeStyles({
    main: {
        gap: '16px',
        display: 'flex',
        flexWrap: 'wrap',
    },
    card: {
        maxWidth: '400px',
        width: '100%',
        height: 'fit-content',
    },
    caption: {
        color: tokens.colorNeutralForeground3,
    },
    smallRadius: { borderRadius: tokens.borderRadiusSmall },
    grayBackground: {
        backgroundColor: tokens.colorNeutralBackground3,
    },
    logoBadge: {
        padding: '5px',
        borderRadius: tokens.borderRadiusSmall,
        backgroundColor: '#FFF',
        boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12)',
    },
});

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}>
      <CardPreview className={styles.grayBackground} logo={<img className={styles.logoBadge} src={resolveAsset('logo3.svg')} alt="Figma app logo"/>}>
        <img className={styles.smallRadius} src={resolveAsset('office1.png')} alt="Presentation Preview"/>
      </CardPreview>

      <CardHeader header={<Text weight="semibold">iOS App Prototype</Text>} description={<Caption1 className={styles.caption}>You created 53m ago</Caption1>} action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More actions"/>}/>
    </Card>);
};

export const Selectable = (): JSXElement => {
    const styles = useStyles();
    const [selected1, setSelected1] = React.useState(false);
    const [selected2, setSelected2] = React.useState(false);
    return (<div className={styles.main}>
      <CardExample selected={selected1} onSelectionChange={(_, { selected }) => setSelected1(selected)}/>
      <CardExample selected={selected2} onSelectionChange={(_, { selected }) => setSelected2(selected)}/>
    </div>);
};

export default Selectable;