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

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

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

const useComparisonStyles = makeStyles({
    root: {
        width: '100%',
        overflowX: 'auto',
    },
    comparison: {
        display: 'grid',
        gridTemplateColumns: 'repeat(2, max-content)',
        columnGap: tokens.spacingHorizontalXXL,
        marginInline: 'auto',
        width: 'max-content',
        color: tokens.colorNeutralForeground1,
    },
    example: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        rowGap: tokens.spacingVerticalM,
    },
});

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}/>;
}

function IconComparison({ icon: Icon, label, nativeSize, multiplier, radius = 1, pitch = 5, }: SamplingProps & {
    icon: FluentIcon;
    label: string;
    nativeSize: number;
}) {
    const styles = useComparisonStyles();
    const columns = nativeSize * multiplier;
    const width = columns * pitch;
    return (<div className={styles.root}>
      <div className={styles.comparison}>
        <div className={styles.example}>
          <Text>Original</Text>
          <Icon style={{ width, height: width }} aria-label={`Original ${label}`}/>
          <Text>
            {label}: native {nativeSize} x {nativeSize}
          </Text>
        </div>
        <div className={styles.example}>
          <Text>Illicon</Text>
          <ConvertedIllicon icon={Icon} multiplier={multiplier} radius={radius} pitch={pitch} aria-label={`Illicon ${label}`}/>
          <Text>
            {columns} x {columns} cells; {width} x {width}px; {radius * 2}px dots
          </Text>
        </div>
      </div>
    </div>);
}

const StrokedSvgIcon: FluentIcon = (props) => (<svg {...props} role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1">
    <rect x="4.5" y="4.5" width="15" height="15" rx="2"/>
    <circle cx="12" cy="12" r="4.5"/>
    <path d="M6.5 17.5 17.5 6.5"/>
  </svg>);

export const StrokedSvg = (args: SamplingProps) => (<IconComparison {...args} icon={StrokedSvgIcon} label="Stroked SVG" nativeSize={24}/>);

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