import React, { useEffect, useState } from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { BsDropdown, Button } from '../bootstrap';
import { CTA_CLASS_NAME } from './constants';
import { Dropdown } from './dropdown';
import { defaultHeaderLabelFormatter } from './utils';
import type { DropdownCTAProps, DropdownOption } from './types';
import type { GroupBase, OnChangeValue } from 'react-select';

/*
 * @deprecated Please use <HeaderDropdown>
 */
export function DropdownCTA<
    T extends DropdownOption = DropdownOption,
    M extends boolean = false,
    G extends GroupBase<T> = GroupBase<T>,
>({
    id,
    children,
    onChange,
    closeMenuOnSelect,
    className,
    testId = CTA_CLASS_NAME,
    closeMenuOnClear = true,
    onClose,
    hideFilter = false,
    headerPlaceholder,
    formatHeaderLabel = defaultHeaderLabelFormatter,
    ...rest
}: DropdownCTAProps<T, M, G>) {
    const [open, setOpen] = useState<boolean>(false);
    const [show, setShow] = useState<false | undefined>();
    const [selectedValue, setSelectedValue] = useState<OnChangeValue<T, M>>();

    const handleChange: typeof onChange = (value, meta) => {
        if (
            (meta.action === 'clear' && closeMenuOnClear) ||
            (meta.action !== 'clear' && closeMenuOnSelect)
        ) {
            setShow(false);
            onClose?.('select');
        }

        onChange?.(value, meta);
        setSelectedValue(value);
        setOpen(false);
    };

    useEffect(() => {
        if (show === false) setShow(undefined);
    }, [show]);

    const onToggle = (
        isOpen: boolean,
        _event: React.SyntheticEvent<BsDropdown>,
        metadata: { source: 'select' | 'click' | 'rootClose' | 'keydown' }
    ) => {
        if (!isOpen) onClose?.(metadata.source);
        setOpen(isOpen);
    };

    return (
        <div
            className={cx(CTA_CLASS_NAME, className, {
                [`${CTA_CLASS_NAME}-hide-filter`]: hideFilter,
            })}
            data-testid={testId}
        >
            <BsDropdown as="div" show={show} onToggle={onToggle}>
                <BsDropdown.Toggle as="div" id={id}>
                    {children ? (
                        children
                    ) : (
                        <>
                            <Button className={`${CTA_CLASS_NAME}-toggle`}>
                                {selectedValue
                                    ? formatHeaderLabel(selectedValue)
                                    : headerPlaceholder}
                                {open ? (
                                    <GlyphIcon name="chevronUp" size={16} />
                                ) : (
                                    <GlyphIcon name="chevronDown" size={16} />
                                )}
                            </Button>
                        </>
                    )}
                </BsDropdown.Toggle>
                <BsDropdown.Menu>
                    <Dropdown {...rest} menuIsOpen onChange={handleChange} />
                </BsDropdown.Menu>
            </BsDropdown>
        </div>
    );
}