import React, { useEffect, useState } from 'react';
import cx from 'classnames';
import { BsDropdown } from '../bootstrap';
import { CTA_CLASS_NAME as BASE_CLASS_NAME } from '../dropdown/constants';
import { SearchDropdown } from './searchDropdown';
import type { SearchDropdownCTAProps } from './types';
import type { DropdownOption } from '../dropdown/types';
import type { GroupBase } from 'react-select';

const CLASS_NAME = 'SearchDropdownCTA';

/*
 * @deprecated Please use <HeaderSearchDropdown>
 */
export function SearchDropdownCTA<
    T extends DropdownOption = DropdownOption,
    M extends boolean = false,
    G extends GroupBase<T> = GroupBase<T>,
>({
    id,
    children,
    onChange,
    closeMenuOnSelect,
    className,
    testId = CLASS_NAME,
    closeMenuOnClear = true,
    onClose,
    ...rest
}: SearchDropdownCTAProps<T, M, G>) {
    const [show, setShow] = useState<false | undefined>();

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

        onChange?.(value, meta);
    };

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

    return (
        <div className={cx(BASE_CLASS_NAME, CLASS_NAME, className)} data-testid={testId}>
            <BsDropdown as="div" show={show} onToggle={onToggle}>
                <BsDropdown.Toggle as="div" id={id}>
                    {children}
                </BsDropdown.Toggle>
                <BsDropdown.Menu>
                    <SearchDropdown {...rest} menuIsOpen onChange={handleChange} />
                </BsDropdown.Menu>
            </BsDropdown>
        </div>
    );
}