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

import { useId } from "@coreai-ds/react-components";
import * as React from 'react';
import { RadioGroup } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Card } from "@coreai-ds/react-components";
import { Radio } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";

export const SelectableIndicatorRadio = () => {
    const options = [
        { value: 'option-1', label: 'Option 1', description: 'The recommended default' },
        { value: 'option-2', label: 'Option 2', description: 'A balanced choice' },
        { value: 'option-3', label: 'Option 3', description: 'For advanced needs' },
        { value: 'option-4', label: 'Option 4', description: 'Maximum flexibility' },
    ];
    const idPrefix = useId('card-title');
    const groupLabelId = useId('card-radio-group-label');
    const [selectedValue, setSelectedValue] = React.useState<string>('');
    const onChange = React.useCallback((_: React.FormEvent<HTMLDivElement>, data: {
        value: string;
    }) => setSelectedValue(data.value), []);
    const onSelectionChange = React.useCallback((value: string) => () => setSelectedValue(value), []);
    const styles = /* css */ `
      .card-selectable-radio-example {
        display: flex;
        flex-direction: column;
        gap: var(--spacingVerticalL);
      }

      .card-selectable-radio-example__row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacingHorizontalL);
      }

      .card-selectable-radio-example__card {
        height: fit-content;
        max-width: 400px;
        width: 100%;
      }

      .card-selectable-radio-example__caption {
        color: var(--colorNeutralForeground3);
      }
    `;
    return (<>
        <style>{styles}</style>
        <RadioGroup aria-labelledby={groupLabelId} value={selectedValue} onChange={onChange}>
          <div className="card-selectable-radio-example">
            <Text id={groupLabelId} weight="semibold">
              Select an option
            </Text>
            <div className="card-selectable-radio-example__row">
              {options.map(({ value, label, description }) => {
            const titleId = `${idPrefix}-${value}`;
            return (<Card key={value} className="card-selectable-radio-example__card" floatingActionPosition="left" floatingAction={<Radio value={value} aria-labelledby={titleId}/>} selected={selectedValue === value} onSelectionChange={onSelectionChange(value)}>
                    <CardHeader header={<Text id={titleId} weight="semibold">
                          {label}
                        </Text>} description={<Text preset="bodyS" className="card-selectable-radio-example__caption">
                          {description}
                        </Text>}/>
                  </Card>);
        })}
            </div>
          </div>
        </RadioGroup>
      </>);
};

export default SelectableIndicatorRadio;