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

import type { DotGridRenderOptions } from "@coreai-ds/react-components";
import { iconToDotGrid } from "@coreai-ds/react-components";
import type { FluentIcon } from "@fluentui/react-icons";
import * as React from 'react';
import { Text } from "@coreai-ds/react-components";
import { Illicon } from "@coreai-ds/react-components";
import { Agents20Filled } from "@fluentui/react-icons";

type SamplingProps = DotGridRenderOptions & {
    multiplier: number;
};

function ConvertedIllicon({ icon, multiplier, convert = iconToDotGrid, ...props }: DotGridRenderOptions & {
    icon: FluentIcon;
    multiplier?: number;
    'aria-label'?: string;
    convert?: typeof iconToDotGrid;
}) {
    const [sample, setSample] = React.useState<{
        icon: FluentIcon;
        multiplier?: number;
        convert: typeof iconToDotGrid;
        value: Awaited<ReturnType<typeof iconToDotGrid>> | Error;
    }>();
    React.useEffect(() => {
        let active = true;
        void convert(icon, { multiplier }).then((value) => {
            if (active)
                setSample({ icon, multiplier, convert, value });
        }, (error: unknown) => {
            if (active) {
                setSample({
                    icon,
                    multiplier,
                    convert,
                    value: error instanceof Error ? error : new Error(String(error)),
                });
            }
        });
        return () => {
            active = false;
        };
    }, [icon, multiplier, convert]);
    if (!sample ||
        sample.icon !== icon ||
        sample.multiplier !== multiplier ||
        sample.convert !== convert) {
        return <Text role="status">Converting illustration...</Text>;
    }
    if (sample.value instanceof Error) {
        return <Text role="alert">{sample.value.message}</Text>;
    }
    return <Illicon {...props} data={sample.value}/>;
}

export const Default = (args: SamplingProps) => (<ConvertedIllicon {...args} icon={Agents20Filled} aria-label="Agents illustration"/>);

export default function Example() { return <Default {...{ multiplier: 2, radius: 1, pitch: 5 }} />; }