import React from 'react';
import { DatePicker, Input, Select } from 'antd';
import RefAttr from '../refAttr';
import Style from './web.pc.module.less';
export default function SearchPanelRender(props) {
    const { resolvedColumns = [], values = {}, } = props.data;
    const { setColumnValue, clearColumnValue, commitColumnValue, handleInputChange, startComposition, endComposition, setCustomValue, } = props.methods;
    const columns = resolvedColumns;
    if (!resolvedColumns.length) {
        return null;
    }
    return (<div className={Style.container}>
            {columns.map((column) => {
            const currentValue = values[column.name];
            let content = null;
            if (column.render) {
                content = column.render({
                    column,
                    value: currentValue,
                    placeholder: column.resolvedPlaceholder,
                    viewType: column.viewType,
                    setValue: (value) => setCustomValue(column.name, value),
                    clear: () => clearColumnValue(column.name),
                });
            }
            else if (column.viewType === 'Input') {
                content = (<Input allowClear disabled={column.disabled} placeholder={column.resolvedPlaceholder} prefix={column.prefix} suffix={column.suffix} style={column.style} type={column.attrType && ['money', 'integer', 'int', 'float'].includes(column.attrType)
                        ? 'number'
                        : 'text'} value={currentValue ?? ''} onChange={(event) => {
                        handleInputChange(column.name, event.target.value);
                    }} onCompositionStart={() => {
                        startComposition(column.name);
                    }} onCompositionEnd={(event) => {
                        endComposition(column.name, event.currentTarget.value);
                    }} onPressEnter={() => {
                        commitColumnValue(column.name);
                    }}/>);
            }
            else if (column.viewType === 'Select') {
                content = (<Select allowClear disabled={column.disabled} mode={column.multiple ? 'multiple' : undefined} placeholder={column.resolvedPlaceholder} style={column.style} showSearch={column.showSearch} optionFilterProp={column.optionFilterProp || (column.showSearch ? 'label' : undefined)} value={currentValue} options={column.options} onChange={(value) => {
                        setColumnValue(column.name, value, true);
                    }}/>);
            }
            else if (column.viewType === 'DatePicker') {
                content = (<DatePicker allowClear disabled={column.disabled} placeholder={column.resolvedPlaceholder} style={column.style} value={currentValue} showTime={column.dateProps?.showTime} onChange={(value) => {
                        setColumnValue(column.name, value, true);
                    }}/>);
            }
            else if (column.viewType === 'DatePicker.RangePicker') {
                content = (<DatePicker.RangePicker allowClear disabled={column.disabled} style={column.style} value={currentValue} showTime={column.dateProps?.showTime} onChange={(value) => {
                        setColumnValue(column.name, value, true);
                    }}/>);
            }
            else if (column.viewType === 'RefAttr' && column.refProps) {
                const pickerValue = Array.isArray(currentValue)
                    ? currentValue
                    : currentValue
                        ? [currentValue]
                        : [];
                content = (<RefAttr placeholder={column.resolvedPlaceholder} multiple={column.multiple} entityIds={pickerValue} pickerRender={column.refProps} onChange={(ids) => {
                        const nextValue = column.multiple ? ids : ids[0];
                        setColumnValue(column.name, nextValue, true);
                    }}/>);
            }
            if (!content) {
                return null;
            }
            return (<div key={column.name} className={Style.item} style={column.width ? { width: column.width } : undefined}>
                        {content}
                    </div>);
        })}
        </div>);
}