/** @format */

import * as React from 'react';
import Select, {SelectProps} from './select';
import {useMerchantBaseApiList} from '../../service/baseApi';
interface Iprops extends SelectProps {
    merchant_id?: number | '' | string;
    onChange: (value: any, options: any) => void;
    value: any;
    showApi?: boolean;
    only_base_api?: boolean;
    apiIds:any
}
/**
 * 下拉选择框 baseApi
 */
export default React.forwardRef((props: Iprops, ref) => {
    const {merchant_id = '', value, onChange, showApi = false, only_base_api = true, apiIds, ...rest} = props;
    const [state, setState] = React.useState({value: value});
    const [listState, requestData] = useMerchantBaseApiList();
    React.useEffect(() => {
        requestData({
            merchant_id: merchant_id,
            is_all: true,
            only_base_api: only_base_api,
        });
        if(!merchant_id){
            setState({value:[]})
        }
    }, [merchant_id]);
    React.useEffect(() => {
        if (!value && value !== 0) {
            setState(preSTate => ({...preSTate, value: value || undefined}));
        }
    }, [value]);

    React.useEffect(()=>{
        if(apiIds?.length ===0 ){
            setState({value:[]})
        }
    },[apiIds])
    return (
        <Select
            ref={ref}
            loading={listState.loading}
            showSearch
            options={listState.dataSource
                .map(element => {
                    if (showApi) {
                        return {
                            ...element,
                            label: element.data_api_name ? `${element.name}(${element.data_api_name})` : element.name,
                        };
                    } else {
                        return {...element, label: element.name};
                    }
                })
                .sort((pre, next) => {
                    return pre.label.toLocaleLowerCase().localeCompare(next.label.toLocaleLowerCase(), 'zh', {
                        caseFirst: 'lower',
                        sensitivity: 'accent',
                        ignorePunctuation: true,
                    });
                })}
            allowClear
            placeholder='请选择接口'
            value={state.value}
            onChange={(value, options) => {
                setState(preState => ({...preState, value}));
                if (!!value || value == 0) {
                    if (Array.isArray(options)) {
                        onChange &&
                            onChange(
                                options.map(element => {
                                    return element.props['data-props'].api_id;
                                }),
                                options,
                            );
                    } else {
                        const {props} = options;
                        onChange && onChange(props['data-props'].api_id, options);
                    }
                    return;
                }
                onChange && onChange('', {});
            }}
            {...rest}
        />
    );
});
