import React, { useRef, useState } from 'react';
import { Checkbox, Input, Radio, Modal, Space, Select, } from 'antd';
import Picker from '../picker';
import { combineFilters } from 'oak-domain/es/store/filter';
function mergeOptions(...groups) {
    const result = [];
    const ids = new Set();
    groups.forEach((group) => {
        (group || []).forEach((item) => {
            if (!ids.has(item.id)) {
                ids.add(item.id);
                result.push(item);
            }
        });
    });
    return result;
}
export default function render(props) {
    const { pickerRender, renderValue, data, selectedData, loading, multiple, onChange, entityIds, placeholder, schema, } = props.data;
    const { t, search, openSearch } = props.methods;
    const { mode } = pickerRender;
    const [visibile, setVisible] = useState(false);
    const searchStateRef = useRef({
        composing: false,
    });
    const [searchValue, setSearchValue] = useState('');
    const [dynamicFilter, setDynamicFilter] = useState(undefined);
    const [dynamicSorter, setDynamicSorter] = useState(undefined);
    const [dynamicProjection, setDynamicProjection] = useState(undefined);
    switch (mode) {
        case 'select': {
            const entityId = entityIds && entityIds[0];
            const options = mergeOptions(selectedData, data);
            return (<Select placeholder={placeholder} mode={multiple ? 'multiple' : undefined} value={multiple ? entityIds : entityId} showSearch={!!pickerRender.searchFilter} searchValue={pickerRender.searchFilter ? searchValue : undefined} filterOption={pickerRender.searchFilter ? false : undefined} onOpenChange={pickerRender.searchFilter
                    ? (open) => {
                        if (open) {
                            setSearchValue('');
                            void openSearch();
                        }
                    }
                    : undefined} components={pickerRender.searchFilter
                    ? {
                        input: (<input placeholder="" onChange={(event) => {
                                const nextValue = event.currentTarget.value;
                                setSearchValue(nextValue);
                                if (searchStateRef.current.composing) {
                                    return;
                                }
                                void search(nextValue);
                            }} onCompositionStart={() => {
                                searchStateRef.current.composing = true;
                            }} onCompositionEnd={(event) => {
                                searchStateRef.current.composing = false;
                                const nextValue = event.currentTarget.value;
                                setSearchValue(nextValue);
                                void search(nextValue);
                            }}/>),
                    }
                    : undefined} onBlur={pickerRender.searchFilter
                    ? () => {
                        searchStateRef.current.composing = false;
                    }
                    : undefined} loading={loading} onChange={(value) => {
                    if (pickerRender.searchFilter) {
                        setSearchValue('');
                    }
                    if (typeof value === 'string') {
                        onChange([value]);
                    }
                    else if (!value) {
                        onChange([]);
                    }
                    else if (value instanceof Array) {
                        onChange(value);
                    }
                }} options={options.map((ele) => ({
                    value: ele.id,
                    label: ele.title,
                }))} allowClear={!pickerRender.required}></Select>);
        }
        case 'radio': {
            const entityId = entityIds && entityIds[0];
            if (multiple) {
                return (<Checkbox.Group options={(data || []).map((ele) => ({
                        value: ele.id,
                        label: ele.title,
                        key: ele.id,
                    }))} value={entityIds} onChange={(value) => onChange(value)}/>);
            }
            return (<Radio.Group onChange={({ target }) => onChange(target.value)} value={entityId} options={(data || []).map((ele) => ({
                    value: ele.id,
                    label: ele.title,
                    key: ele.id,
                }))}></Radio.Group>);
        }
        case 'list': {
            const { entity, projection, title, titleLabel, filter, sorter, required, getDynamicSelectors, } = pickerRender;
            return (<Space>
                    <Input placeholder={placeholder} value={renderValue} allowClear={!required} onClick={async () => {
                    if (getDynamicSelectors) {
                        const { projection: dynamicProjection2, filter: dynamicFilter2, sorter: dynamicSorter2, } = await getDynamicSelectors();
                        if (dynamicFilter2 || filter) {
                            setDynamicFilter(combineFilters(entity, schema, [
                                dynamicFilter2,
                                filter,
                            ]));
                        }
                        if (dynamicSorter2 || sorter) {
                            setDynamicSorter(dynamicSorter2 || sorter);
                        }
                        if (dynamicProjection2 || projection) {
                            setDynamicProjection(dynamicProjection2 || projection);
                        }
                    }
                    else {
                        if (filter) {
                            setDynamicFilter(filter);
                        }
                        if (sorter) {
                            setDynamicSorter(sorter);
                        }
                        if (projection) {
                            setDynamicProjection(projection);
                        }
                    }
                    setVisible(true);
                }} onChange={({ currentTarget }) => {
                    if (!currentTarget.value) {
                        onChange([]);
                    }
                }}/>
                    <Modal title={`閫夋嫨${t(`${pickerRender.entity}:name`)}`} open={visibile} closable={true} onCancel={() => {
                    setDynamicFilter(undefined);
                    setDynamicProjection(undefined);
                    setDynamicSorter(undefined);
                    setVisible(false);
                }} destroyOnClose={true} footer={null}>
                        <Picker multiple={false} oakPath={`$refAttr-picker-${entity}`} entity={entity} title={title} titleLabel={titleLabel} filter={dynamicFilter} sorter={dynamicSorter} projection={dynamicProjection || projection} onSelect={(data2) => {
                    onChange(data2.map((ele) => ele.id));
                    setVisible(false);
                }}/>
                    </Modal>
                </Space>);
        }
    }
}