import React, { forwardRef } from 'react';
import cx from 'classnames';
import {
    Breadcrumb as BsBreadcrumb,
    Button as BsButton,
    Col as BsCol,
    Container as BsContainer,
    InputGroup as BsInputGroup,
    Form as BsForm,
    Nav as BsNav,
    Overlay,
    OverlayTrigger,
    Popover,
    Row as BsRow,
    Tab as BsTab,
    Tabs as BsTabs,
    Table as BsTable,
    Tooltip,
} from 'react-bootstrap';
import type { ButtonProps as BsButtonProps } from 'react-bootstrap';

export { Dropdown as BsDropdown, Modal as BsModal } from 'react-bootstrap';

/**
 * Breadcumbs indicate the level of hierarchy of a given page in an app. They typically live in our Page.Header component.
 *
 * @type molecule
 * @status live
 * @tags navigation
 */
export const Breadcrumb = BsBreadcrumb;

/**
 * Col is a component that displays content in a column. This component comes from bootstrap and shouldn't be used in Suite.
 *
 * @deprecated This component comes from bootstrap and shouldn't be used in Suite.
 * @type organism
 * @status deprecated
 * @tags layout-structure
 */
export const Col = BsCol;

/**
 * Container is a component that displays content in a box. This component comes from bootstrap and shouldn't be used in Suite.
 *
 * @deprecated This component comes from bootstrap and shouldn't be used in Suite.
 * @type organism
 * @status deprecated
 * @tags layout-structure
 */
export const Container = BsContainer;

/**
 * Please use SegmentedInput with static value instead.
 *
 * @deprecated Please use SegmentedInput with static value instead.
 * @type atom
 * @status deprecated
 * @tags form-elements
 */
export const InputGroup = BsInputGroup;

/**
 * Form is a wrapper that groups form-related components.
 *
 * @type molecule
 * @status revised
 * @tags form-elements
 */
export const Form = BsForm;

/**
 * Please use SegmentedButton instead.
 *
 * @deprecated Please use SegmentedButton instead.
 * @type atom
 * @status deprecated
 * @tags navigation
 */
export const Nav = BsNav;

/**
 * Row is a component that displays content in a row. This component comes from bootstrap and shouldn't be used in Suite.
 *
 * @deprecated This component comes from bootstrap and shouldn't be used in Suite.
 * @type template
 * @status deprecated
 * @tags layout-structure
 */
export const Row = BsRow;

export const Tab = BsTab;

/**
 * Tabs are used to organise information related to an object into distinct sections.
 *
 * @type molecule
 * @status live
 * @tags navigation
 */
export const Tabs = BsTabs;

/**
 * Please use GridTable instead.
 *
 * @deprecated Please use GridTable instead.
 * @type organism
 * @status deprecated
 * @tags tables-lists
 */
export const Table = BsTable;

/**
 * @deprecated Migrate to Tooltip. This will be dropped in the next major version
 */
export const BsTooltip = Tooltip;

export type ButtonProps = BsButtonProps &
    Pick<React.ComponentPropsWithoutRef<'button'>, 'form'> & {
        /**
         * Style button as a round glyph button.
         * Button must only contain a single GlyphIcon element.
         */
        glyph?: boolean;
        /**
         * Adds a spinner to the button to indicate loading. Disables mouse interaction.
         */
        loading?: boolean;

        /**
         * Test ID for the button, used for testing purposes.
         */
        testId?: string;
    };

/**
 * Buttons communicate actions that users can take. They should be easily findable and identifiable while clearly indicating the action they allow a user to perform.
 *
 * @type atom
 * @status live
 * @tags buttons
 */

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({ glyph, loading, disabled, className, testId, ...props }, ref) => (
        <BsButton
            ref={ref}
            data-testid={testId}
            variant="secondary"
            disabled={disabled || loading}
            className={cx(className, {
                'suite-glyph-button': glyph,
                loading,
            })}
            {...props}
        />
    )
);

/**
 * @deprecated Migrate to either Tooltip or Popover. This will be dropped in the next major version
 */
export const BsOverlay = Overlay;

/**
 * @deprecated Migrate to either Tooltip or Popover. This will be dropped in the next major version
 */
export const BsOverlayTrigger = OverlayTrigger;

/**
 * @deprecated Migrate to Popover. This will be dropped in the next major version
 */
export const BsPopover = Popover;