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

import type { CardFloatingActionPosition } from "@coreai-ds/react-components";
import * as React from 'react';
import { Card } from "@coreai-ds/react-components";
import { Checkbox } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";

export const FloatingActionPosition = () => {
    const positions: {
        value: CardFloatingActionPosition;
        label: string;
    }[] = [
        { value: 'right', label: 'Right (default)' },
        { value: 'left', label: 'Left' },
    ];
    const PositionCard = ({ position, label, }: {
        position: CardFloatingActionPosition;
        label: string;
    }) => {
        const [selected, setSelected] = React.useState(false);
        return (<Card className="card-floating-action-example__card" floatingActionPosition={position} floatingAction={<Checkbox checked={selected} aria-label={`Select ${label}`} onChange={(_, data) => setSelected(!!data.checked)}/>} selected={selected} onSelectionChange={(_, data) => setSelected(data.selected)}>
          <CardHeader header={<Text weight="semibold">{label}</Text>} description={<Text preset="bodyS" className="card-floating-action-example__caption">
                floatingActionPosition="{position}"
              </Text>}/>
        </Card>);
    };
    const styles = /* css */ `
      .card-floating-action-example {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 36px;
      }

      .card-floating-action-example__title {
        margin: 0 0 var(--spacingVerticalM);
      }

      .card-floating-action-example__grid {
        display: flex;
        gap: var(--spacingHorizontalL);
      }

      .card-floating-action-example__card {
        height: fit-content;
      }

      .card-floating-action-example__caption {
        color: var(--colorNeutralForeground3);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="card-floating-action-example">
          <header>
            <Text as="h4" preset="heading3" block className="card-floating-action-example__title">
              Floating action position
            </Text>
            <Text as="p" preset="body" block>
              The CoreAI <code>Card</code> adds a <code>floatingActionPosition</code> prop that
              re-pins the <code>floatingAction</code> slot. Stock Fluent only supports the right
              placement; the wrapper adds a left placement.
            </Text>
          </header>

          <div className="card-floating-action-example__grid">
            {positions.map(({ value, label }) => (<PositionCard key={value} position={value} label={label}/>))}
          </div>
        </div>
      </>);
};

export default FloatingActionPosition;