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

import type { DotGridRenderOptions } from "@coreai-ds/react-components";
import { Agents20Filled } from "@fluentui/react-icons";
import { Agents20Regular } from "@fluentui/react-icons";
import { Brain24Filled } from "@fluentui/react-icons";
import { Brain24Regular } from "@fluentui/react-icons";
import { Cube24Filled } from "@fluentui/react-icons";
import { Cube24Regular } from "@fluentui/react-icons";
import { Database24Filled } from "@fluentui/react-icons";
import { Database24Regular } from "@fluentui/react-icons";
import { Document24Filled } from "@fluentui/react-icons";
import { Document24Regular } from "@fluentui/react-icons";
import { FolderAdd20Filled } from "@fluentui/react-icons";
import { FolderAdd20Regular } from "@fluentui/react-icons";
import { FolderAdd24Filled } from "@fluentui/react-icons";
import { FolderAdd24Regular } from "@fluentui/react-icons";
import { Heart16Filled } from "@fluentui/react-icons";
import { Heart16Regular } from "@fluentui/react-icons";
import { Heart20Filled } from "@fluentui/react-icons";
import { Heart20Regular } from "@fluentui/react-icons";
import { Heart24Filled } from "@fluentui/react-icons";
import { Heart24Regular } from "@fluentui/react-icons";
import { Rocket16Filled } from "@fluentui/react-icons";
import { Rocket16Regular } from "@fluentui/react-icons";
import { Rocket24Filled } from "@fluentui/react-icons";
import { Rocket24Regular } from "@fluentui/react-icons";
import { Scales20Filled } from "@fluentui/react-icons";
import { Scales20Regular } from "@fluentui/react-icons";
import { Search24Filled } from "@fluentui/react-icons";
import { Search24Regular } from "@fluentui/react-icons";
import { Shield24Filled } from "@fluentui/react-icons";
import { Shield24Regular } from "@fluentui/react-icons";
import { Star24Filled } from "@fluentui/react-icons";
import { Star24Regular } from "@fluentui/react-icons";
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 iconOptions = {
    Agents20: { filled: Agents20Filled, regular: Agents20Regular, nativeSize: 20 },
    Brain24: { filled: Brain24Filled, regular: Brain24Regular, nativeSize: 24 },
    Cube24: { filled: Cube24Filled, regular: Cube24Regular, nativeSize: 24 },
    Database24: { filled: Database24Filled, regular: Database24Regular, nativeSize: 24 },
    Document24: { filled: Document24Filled, regular: Document24Regular, nativeSize: 24 },
    FolderAdd20: { filled: FolderAdd20Filled, regular: FolderAdd20Regular, nativeSize: 20 },
    FolderAdd24: { filled: FolderAdd24Filled, regular: FolderAdd24Regular, nativeSize: 24 },
    Heart16: { filled: Heart16Filled, regular: Heart16Regular, nativeSize: 16 },
    Heart20: { filled: Heart20Filled, regular: Heart20Regular, nativeSize: 20 },
    Heart24: { filled: Heart24Filled, regular: Heart24Regular, nativeSize: 24 },
    Rocket16: { filled: Rocket16Filled, regular: Rocket16Regular, nativeSize: 16 },
    Rocket24: { filled: Rocket24Filled, regular: Rocket24Regular, nativeSize: 24 },
    Scales20: { filled: Scales20Filled, regular: Scales20Regular, nativeSize: 20 },
    Search24: { filled: Search24Filled, regular: Search24Regular, nativeSize: 24 },
    Shield24: { filled: Shield24Filled, regular: Shield24Regular, nativeSize: 24 },
    Star24: { filled: Star24Filled, regular: Star24Regular, nativeSize: 24 },
};

type ComparisonProps = SamplingProps & {
    icon: keyof typeof iconOptions;
    variant: 'Filled' | 'Regular';
};

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

export const OriginalVsIllicon = ({ icon, variant, ...args }: ComparisonProps) => {
    const source = iconOptions[icon];
    return (<IconComparison {...args} icon={variant === 'Filled' ? source.filled : source.regular} label={`${icon}${variant}`} nativeSize={source.nativeSize}/>);
};

export default function Example() { return <OriginalVsIllicon {...{
    icon: 'Scales20',
    variant: 'Filled',
    multiplier: 2,
    radius: 1,
    pitch: 5,
  }} />; }