// 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 * as React from 'react';
import { Card } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";
import { Body1 } from "@coreai-ds/react-components";
import { Caption1 } from "@coreai-ds/react-components";
import { CardPreview } from "@coreai-ds/react-components";
import { CardFooter } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { ArrowReplyRegular } from "@fluentui/react-icons";
import { ShareRegular } from "@fluentui/react-icons";
import { Checkbox } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    container: {
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
    },
    card: {
        maxWidth: '400px',
        minWidth: '230px',
        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 CardContentExample = ({ disabled }: {
    disabled?: boolean;
}) => (<>
    <CardHeader image={<img src={resolveAsset('avatar_elvia.svg')} alt="Elvia Atkins avatar picture"/>} header={<Body1>
          <b>Elvia Atkins</b> mentioned you
        </Body1>} description={<Caption1>5h ago · About us - Overview</Caption1>}/>

    <CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word document"/>}>
      <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document: About Us - Overview"/>
    </CardPreview>

    <CardFooter>
      <Button disabled={disabled} icon={<ArrowReplyRegular fontSize={16}/>}>
        Reply
      </Button>
      <Button disabled={disabled} icon={<ShareRegular fontSize={16}/>}>
        Share
      </Button>
    </CardFooter>
  </>);

export const Disabled = (): JSXElement => {
    const styles = useStyles();
    const [isSelected1, setIsSelected1] = React.useState(false);
    const [isSelected2, setIsSelected2] = React.useState(false);
    return (<div className={styles.container}>
      <div>
        <h3>Default Card</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
          <Card className={styles.card}>
            <CardContentExample />
          </Card>

          <Card className={styles.card} disabled>
            <CardContentExample disabled/>
          </Card>
        </div>
      </div>

      <div>
        <h3>Interactive Card</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
          <Card className={styles.card} onClick={() => alert('Card clicked')}>
            <CardContentExample />
          </Card>

          <Card className={styles.card} disabled onClick={() => alert('Card clicked')}>
            <CardContentExample disabled/>
          </Card>
        </div>
      </div>

      <div>
        <h3>Selectable Card</h3>
        <div style={{ display: 'flex', flexDirection: 'column', rowGap: '16px' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
            <Card className={styles.card} selected={isSelected1} onSelectionChange={(_, { selected }) => setIsSelected1(selected)}>
              <CardContentExample />
            </Card>
            <Card className={styles.card} disabled selected={false}>
              <CardContentExample disabled/>
            </Card>
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
            <Card className={styles.card} selected={isSelected2} onSelectionChange={(_, { selected }) => setIsSelected2(selected)} floatingAction={<Checkbox checked={isSelected2} onChange={() => setIsSelected2(!isSelected2)}/>}>
              <CardContentExample />
            </Card>
            <Card className={styles.card} selected={false} floatingAction={<Checkbox disabled/>} disabled>
              <CardContentExample disabled/>
            </Card>
          </div>
        </div>
      </div>

      <div>
        <h3>Outline Card</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
          <Card className={styles.card} appearance="outline">
            <CardContentExample />
          </Card>

          <Card className={styles.card} appearance="outline" disabled>
            <CardContentExample disabled/>
          </Card>
        </div>
      </div>
    </div>);
};

export default Disabled;