// 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 * as React from 'react';
import type { TagGroupProps } from "@coreai-ds/react-components";
import { TagGroup } from "@coreai-ds/react-components";
import { Tag } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { InteractionTag } from "@coreai-ds/react-components";
import { InteractionTagPrimary } from "@coreai-ds/react-components";
import { InteractionTagSecondary } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    container: {
        display: 'flex',
        flexDirection: 'column',
        rowGap: '10px',
    },
    tagGroup: {
        flexWrap: 'wrap',
    },
    resetButton: {
        width: 'fit-content',
    },
});

const initialTags = [
    { value: '1', children: 'Tag 1' },
    { value: '2', children: 'Tag 2' },
    { value: '3', children: 'Tag 3' },
];

/**
 * focus management for the reset button
 */
const useResetExample = (visibleTagsLength: number) => {
    const resetButtonRef = React.useRef<HTMLButtonElement>(null);
    const firstTagRef = React.useRef<HTMLButtonElement>(null);
    const prevVisibleTagsLengthRef = React.useRef<number>(visibleTagsLength);
    React.useEffect(() => {
        if (visibleTagsLength === 0) {
            resetButtonRef.current?.focus();
        }
        else if (prevVisibleTagsLengthRef.current === 0) {
            firstTagRef.current?.focus();
        }
        prevVisibleTagsLengthRef.current = visibleTagsLength;
    }, [visibleTagsLength]);
    return { firstTagRef, resetButtonRef };
};

const DismissWithTags = () => {
    const [visibleTags, setVisibleTags] = React.useState(initialTags);
    const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => {
        setVisibleTags([...visibleTags].filter(tag => tag.value !== value));
    };
    const resetItems = () => setVisibleTags(initialTags);
    const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length);
    const styles = useStyles();
    return (<>
      {visibleTags.length !== 0 && (<TagGroup className={styles.tagGroup} onDismiss={removeItem} aria-label="TagGroup example with dismissible Tags">
          {visibleTags.map((tag, index) => (<Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value} ref={index === 0 ? firstTagRef : null}>
              {tag.children}
            </Tag>))}
        </TagGroup>)}
      <Button onClick={resetItems} ref={resetButtonRef} disabled={visibleTags.length === initialTags.length} className={styles.resetButton} size="small">
        Reset the example
      </Button>
    </>);
};

const DismissWithInteractionTags = () => {
    const [visibleTags, setVisibleTags] = React.useState(initialTags);
    const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => {
        setVisibleTags([...visibleTags].filter(tag => tag.value !== value));
    };
    const resetItems = () => setVisibleTags(initialTags);
    const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length);
    const styles = useStyles();
    return (<>
      {visibleTags.length !== 0 && (<TagGroup className={styles.tagGroup} onDismiss={removeItem} aria-label="Dismiss example">
          {visibleTags.map((tag, index) => (<InteractionTag value={tag.value} key={tag.value}>
              <InteractionTagPrimary hasSecondaryAction ref={index === 0 ? firstTagRef : null}>
                {tag.children}
              </InteractionTagPrimary>
              <InteractionTagSecondary aria-label="remove"/>
            </InteractionTag>))}
        </TagGroup>)}
      <Button onClick={resetItems} ref={resetButtonRef} disabled={visibleTags.length !== 0} className={styles.resetButton} size="small">
        Reset the example
      </Button>
    </>);
};

export const Dismiss = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.container}>
      Example with Tag:
      <DismissWithTags />
      Example with InteractionTag:
      <DismissWithInteractionTags />
    </div>);
};

export default Dismiss;