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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { buttonClassNames } from "@coreai-ds/react-components";
import * as React from 'react';
import { useTimeout } from "@fluentui/react-utilities";
import { Spinner } from "@coreai-ds/react-components";
import { CheckmarkFilled } from "@fluentui/react-icons";
import { Button } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    wrapper: {
        columnGap: '15px',
        display: 'flex',
    },
    buttonNonInteractive: {
        backgroundColor: tokens.colorNeutralBackground1,
        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
        color: tokens.colorNeutralForeground1,
        cursor: 'default',
        pointerEvents: 'none',
        [`& .${buttonClassNames.icon}`]: {
            color: tokens.colorStatusSuccessForeground1,
        },
    },
});

type LoadingState = 'initial' | 'loading' | 'loaded';

export const Loading = (): JSXElement => {
    const styles = useStyles();
    const [loadingState, setLoadingState] = React.useState<LoadingState>('initial');
    const [setTimeout, cancelTimeout] = useTimeout();
    const onButtonClick = () => {
        setLoadingState('loading');
        setTimeout(() => setLoadingState('loaded'), 5000);
    };
    const buttonContent = loadingState === 'loading' ? 'Loading' : loadingState === 'loaded' ? 'Loaded' : 'Start loading';
    const buttonIcon = loadingState === 'loading' ? <Spinner size="tiny"/> : loadingState === 'loaded' ? <CheckmarkFilled /> : null;
    const buttonClassName = loadingState === 'initial' ? undefined : styles.buttonNonInteractive;
    const onResetButtonClick = () => {
        cancelTimeout();
        setLoadingState('initial');
    };
    return (<div className={styles.wrapper}>
      <Button className={buttonClassName} disabledFocusable={loadingState !== 'initial'} icon={buttonIcon} onClick={onButtonClick}>
        {buttonContent}
      </Button>
      <Button onClick={onResetButtonClick}>Reset loading state</Button>
    </div>);
};

export default Loading;