// 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 { Card } from "@coreai-ds/react-components";
import { mergeClasses } from "@coreai-ds/react-components";
import { Badge } from "@coreai-ds/react-components";
import { Checkbox } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Caption1 } from "@coreai-ds/react-components";
import { AlertUrgent16Filled } from "@fluentui/react-icons";
import { CircleHalfFill16Regular } from "@fluentui/react-icons";
import { Attach16Regular } from "@fluentui/react-icons";
import { Body1 } from "@coreai-ds/react-components";
import { CheckmarkCircle16Regular } from "@fluentui/react-icons";
import { Comment16Regular } from "@fluentui/react-icons";
import { CardPreview } 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";
import * as React from 'react';
const useStyles = makeStyles({
    container: {
        gap: '16px',
        display: 'flex',
        flexWrap: 'wrap',
    },
    card: {
        maxWidth: '280px',
        width: '100%',
        height: 'fit-content',
    },
    flex: {
        gap: '4px',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    labels: { gap: '6px' },
    footer: { gap: '12px' },
    caption: {
        color: tokens.colorNeutralForeground3,
    },
    taskCheckbox: {
        display: 'flex',
        alignItems: 'flex-start',
    },
    grid: {
        gap: '16px',
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
    },
});
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 powerpointLogoURL = resolveAsset('pptx.png');
const excelLogo = resolveAsset('xlsx.png');
const wordLogo = resolveAsset('docx.png');
export const Templates = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.container}>
      <Card className={styles.card}>
        <header className={mergeClasses(styles.flex, styles.labels)}>
          <Badge color="severe" shape="rounded" appearance="tint">
            Red
          </Badge>

          <Badge color="success" shape="rounded" appearance="tint">
            Green
          </Badge>

          <Badge color="brand" shape="rounded" appearance="tint">
            Blue
          </Badge>
        </header>

        <div className={styles.taskCheckbox}>
          <Checkbox id="components-card-card--templates-task-1"/>

          <label htmlFor="components-card-card--templates-task-1">
            <Text block weight="semibold">
              Task title
            </Text>

            <Caption1 block className={styles.caption}>
              Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar
              plum.
            </Caption1>
          </label>
        </div>

        <div className={styles.taskCheckbox}>
          <Checkbox id="components-card-card--templates-task-2"/>

          <label htmlFor="components-card-card--templates-task-2">
            <Text block weight="semibold">
              Task title
            </Text>

            <Caption1 block className={styles.caption}>
              Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar
              plum.
            </Caption1>
          </label>
        </div>

        <footer className={mergeClasses(styles.flex, styles.footer)}>
          <AlertUrgent16Filled primaryFill="#C4314B"/>
          <CircleHalfFill16Regular primaryFill="#0078DB"/>

          <div className={styles.flex}>
            <Attach16Regular />
            <Body1>4</Body1>
          </div>

          <div className={styles.flex}>
            <CheckmarkCircle16Regular />
            <Body1>2/12</Body1>
          </div>

          <Comment16Regular />
        </footer>
      </Card>

      <Card className={styles.card}>
        <CardPreview>
          <img src={resolveAsset('intelligence.png')} alt="Intelligence - Design to Amplify"/>
        </CardPreview>
      </Card>

      <div className={styles.grid} role="list">
        <Card className={styles.card} size="small" role="listitem">
          <CardHeader image={{ as: 'img', src: powerpointLogoURL, alt: 'PowerPoint app logo' }} header={<Text weight="semibold">Team Offsite 2020</Text>} description={<Caption1 className={styles.caption}>OneDrive &gt; Presentations</Caption1>} action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontal20Regular />}/>}/>
        </Card>

        <Card className={styles.card} size="small" role="listitem">
          <CardHeader image={{ as: 'img', src: excelLogo, alt: 'Excel app logo' }} header={<Text weight="semibold">Team Budget</Text>} description={<Caption1 className={styles.caption}>OneDrive &gt; Spreadsheets</Caption1>} action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontal20Regular />}/>}/>
        </Card>

        <Card className={styles.card} size="small" role="listitem">
          <CardHeader image={{ as: 'img', src: wordLogo, alt: 'Word app logo' }} header={<Text weight="semibold">Secret Project Briefing</Text>} description={<Caption1 className={styles.caption}>OneDrive &gt; Documents</Caption1>} action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontal20Regular />}/>}/>
        </Card>
      </div>
    </div>);
};

export default Templates;