import { SearchOutlined } from '@ant-design/icons';
import { AutoComplete, Input } from 'antd';
import useMergeValue from 'use-merge-value';
import { AutoCompleteProps } from 'antd/es/auto-complete';
import React, { useRef } from 'react';

import classNames from 'classnames';
import styles from './index.less';

export interface HeaderSearchProps {
    onSearch?: (value?: string) => void;
    onChange?: (value?: string) => void;
    onVisibleChange?: (b: boolean) => void;
    className?: string;
    placeholder?: string;
    options: AutoCompleteProps['options'];
    defaultOpen?: boolean;
    open?: boolean;
    defaultValue?: string;
    value?: string;
}

const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {
    const {
        className,
        defaultValue,
        onVisibleChange,
        placeholder,
        open,
        defaultOpen,
        ...restProps
    } = props;

    const inputRef = useRef<Input | null>(null);

    const [value, setValue] = useMergeValue<string | undefined>(defaultValue, {
        value: props.value,
        onChange: props.onChange,
    });

    const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, {
        value: props.open,
        onChange: onVisibleChange,
    });

    const inputClass = classNames(styles.input, {
        [styles.show]: searchMode,
    });

    return (
        <div
            className={classNames(className, styles.headerSearch)}
            onClick={() => {
                setSearchMode(true);
                if (searchMode && inputRef.current) {
                    inputRef.current.focus();
                }
            }}
            onTransitionEnd={({ propertyName }) => {
                if (propertyName === 'width' && !searchMode) {
                    if (onVisibleChange) {
                        onVisibleChange(searchMode);
                    }
                }
            }}
        >
            <SearchOutlined
                key="Icon"
                style={{
                    cursor: 'pointer',
                }}
            />
            <AutoComplete
                key="AutoComplete"
                className={inputClass}
                value={value}
                options={restProps.options}
                onChange={setValue}
            >
                <Input
                    autoComplete="off" 
                    size="small"
                    ref={inputRef}
                    defaultValue={defaultValue}
                    aria-label={placeholder}
                    placeholder={placeholder}
                    onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                            if (restProps.onSearch) {
                                restProps.onSearch(value);
                            }
                        }
                    }}
                    onBlur={() => {
                        setSearchMode(false);
                    }}
                />
            </AutoComplete>
        </div>
    );
};

export default HeaderSearch;
