import React, { useState } from 'react';
import { Checkbox, Input, Radio, Popup, Space, Selector, } from 'antd-mobile';
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, multiple, onChange, entityId, entityIds, schema, } = props.data;
    const { t } = props.methods;
    const { mode } = pickerRender;
    const [visibile, setVisible] = useState(false);
    const [dynamicFilter, setDynamicFilter] = useState(undefined);
    const [dynamicSorter, setDynamicSorter] = useState(undefined);
    const [dynamicProjection, setDynamicProjection] = useState(undefined);
    switch (mode) {
        case 'select': {
            const options = mergeOptions(selectedData, data);
            return (<Selector value={entityId ? [entityId] : []} onChange={(value) => {
                    onChange(value);
                }} options={options.map((ele) => ({
                    value: ele.id,
                    label: ele.title,
                    key: ele.id,
                }))} multiple={multiple}></Selector>);
        }
        case 'radio': {
            if (multiple) {
                return (<Checkbox.Group value={entityIds} onChange={(value) => onChange(value)}>
                        {(data || []).map((ele) => (<Checkbox key={ele.id} value={ele.id}>{ele.title}</Checkbox>))}
                    </Checkbox.Group>);
            }
            return (<Radio.Group onChange={(value) => onChange([value])} value={entityId}>
                    {(data || []).map((ele) => (<Radio key={ele.id} value={ele.id}>{ele.title}</Radio>))}
                </Radio.Group>);
        }
        case 'list': {
            const { entity, projection, title, titleLabel, filter, sorter, required, getDynamicSelectors, } = pickerRender;
            return (<Space>
                    <Input value={renderValue} clearable={!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={(value) => {
                    if (!value) {
                        onChange([]);
                    }
                }}/>
                    <Popup visible={visibile} closeOnMaskClick={true} onClose={() => {
                    setDynamicFilter(undefined);
                    setDynamicProjection(undefined);
                    setDynamicSorter(undefined);
                    setVisible(false);
                }} destroyOnClose={true} showCloseButton={true} bodyStyle={{
                    height: '80%',
                }}>
                        <Picker multiple={false} oakPath={`$refAttr-picker-${entity}`} entity={entity} title={title} titleLabel={titleLabel} filter={dynamicFilter} sorter={dynamicSorter} projection={dynamicProjection} onSelect={(data2) => {
                    onChange(data2.map((ele) => ele.id));
                    setVisible(false);
                }}/>
                    </Popup>
                </Space>);
        }
    }
}