import React, { useEffect, useState } from 'react';
import { Button, DatePicker, Input, Popup, Selector, Space } from 'antd-mobile';
import dayjs from 'dayjs';
import RefAttr from '../refAttr';
import Style from './web.module.less';
function formatValue(column, value) {
    if (value === undefined || value === null || value === '' || (Array.isArray(value) && !value.length)) {
        return '';
    }
    switch (column.viewType) {
        case 'Input':
            return String(value);
        case 'Select': {
            const optionMap = new Map((column.options || []).map((item) => [item.value, item.label]));
            const values = Array.isArray(value) ? value : [value];
            return values
                .map((item) => optionMap.get(item) || String(item))
                .join(', ');
        }
        case 'DatePicker':
            return dayjs(value).format('YYYY-MM-DD');
        case 'DatePicker.RangePicker': {
            const [start, end] = value;
            return `${dayjs(start).format('YYYY-MM-DD')} - ${dayjs(end).format('YYYY-MM-DD')}`;
        }
        default:
            return '';
    }
}
function MobileColumnControl(props) {
    const { column, value, t, setColumnValue, clearColumnValue, commitColumnValue, handleInputChange, setCustomValue, } = props;
    const [visible, setVisible] = useState(false);
    const [draftValue, setDraftValue] = useState([]);
    const [draftRange, setDraftRange] = useState([undefined, undefined]);
    useEffect(() => {
        const nextDraftValue = Array.isArray(value)
            ? value
            : value !== undefined && value !== null && value !== ''
                ? [value]
                : [];
        setDraftValue(nextDraftValue);
        if (column.viewType === 'DatePicker.RangePicker' && Array.isArray(value) && value.length === 2) {
            setDraftRange([
                dayjs(value[0]).toDate(),
                dayjs(value[1]).toDate(),
            ]);
        }
        else {
            setDraftRange([undefined, undefined]);
        }
    }, [column.viewType, value]);
    if (column.render) {
        return (<div className={Style.item}>
                {column.render({
                column,
                value,
                placeholder: column.resolvedPlaceholder,
                viewType: column.viewType,
                setValue: (nextValue) => setCustomValue(column.name, nextValue),
                clear: () => clearColumnValue(column.name),
            })}
            </div>);
    }
    if (column.viewType === 'Input') {
        return (<div className={Style.item}>
                <Input clearable className={Style.input} placeholder={column.resolvedPlaceholder} value={value || ''} onChange={(nextValue) => {
                handleInputChange(column.name, nextValue);
            }} onEnterPress={(event) => {
                commitColumnValue(column.name, event.currentTarget.value || '', true);
            }} onBlur={(event) => {
                commitColumnValue(column.name, event.currentTarget.value || '', true);
            }}/>
            </div>);
    }
    if (column.viewType === 'Select') {
        return (<div className={Style.item}>
                <Input readOnly clearable className={Style.input} placeholder={column.resolvedPlaceholder} value={formatValue(column, value)} onClick={() => setVisible(true)} onClear={() => clearColumnValue(column.name)}/>
                <Popup visible={visible} onMaskClick={() => setVisible(false)} onClose={() => setVisible(false)} bodyClassName={Style.popup}>
                    <div className={Style.popupBody}>
                        <Selector multiple={column.multiple} value={draftValue} options={(column.options || []).map((item) => ({
                value: item.value,
                label: item.label,
            }))} onChange={(nextValue) => {
                if (column.multiple) {
                    setDraftValue(nextValue);
                    return;
                }
                const next = nextValue[0];
                setCustomValue(column.name, next);
                setVisible(false);
            }}/>
                        {column.multiple && (<Space className={Style.popupActions} justify="between" block>
                                <Button fill="none" onClick={() => {
                    clearColumnValue(column.name);
                    setVisible(false);
                }}>
                                    {t('common::reset')}
                                </Button>
                                <Button color="primary" onClick={() => {
                    setCustomValue(column.name, draftValue);
                    setVisible(false);
                }}>
                                    {t('common::action.confirm')}
                                </Button>
                            </Space>)}
                    </div>
                </Popup>
            </div>);
    }
    if (column.viewType === 'DatePicker') {
        return (<div className={Style.item}>
                <DatePicker visible={visible} precision="day" value={value ? dayjs(value).toDate() : undefined} onClose={() => setVisible(false)} onConfirm={(nextValue) => {
                setColumnValue(column.name, dayjs(nextValue), true);
                setVisible(false);
            }}>
                    {(selected) => (<Input readOnly clearable className={Style.input} placeholder={column.resolvedPlaceholder} value={selected ? dayjs(selected).format('YYYY-MM-DD') : ''} onClick={() => setVisible(true)} onClear={() => clearColumnValue(column.name)}/>)}
                </DatePicker>
            </div>);
    }
    if (column.viewType === 'DatePicker.RangePicker') {
        return (<div className={Style.item}>
                <Input readOnly clearable className={Style.input} placeholder={column.resolvedPlaceholder} value={formatValue(column, value)} onClick={() => setVisible(true)} onClear={() => clearColumnValue(column.name)}/>
                <Popup visible={visible} onMaskClick={() => setVisible(false)} onClose={() => setVisible(false)} bodyClassName={Style.popup}>
                    <div className={Style.popupBody}>
                        <div className={Style.rangeField}>
                            <span className={Style.rangeLabel}>Start</span>
                            <DatePicker precision="day" value={draftRange[0]} onConfirm={(nextValue) => {
                setDraftRange([nextValue, draftRange[1]]);
            }}>
                                {(selected) => (<Input readOnly className={Style.input} placeholder="Start date" value={selected ? dayjs(selected).format('YYYY-MM-DD') : ''}/>)}
                            </DatePicker>
                        </div>
                        <div className={Style.rangeField}>
                            <span className={Style.rangeLabel}>End</span>
                            <DatePicker precision="day" value={draftRange[1]} onConfirm={(nextValue) => {
                setDraftRange([draftRange[0], nextValue]);
            }}>
                                {(selected) => (<Input readOnly className={Style.input} placeholder="End date" value={selected ? dayjs(selected).format('YYYY-MM-DD') : ''}/>)}
                            </DatePicker>
                        </div>
                        <Space className={Style.popupActions} justify="between" block>
                            <Button fill="none" onClick={() => {
                clearColumnValue(column.name);
                setVisible(false);
            }}>
                                {t('common::reset')}
                            </Button>
                            <Button color="primary" disabled={!draftRange[0] || !draftRange[1]} onClick={() => {
                if (!draftRange[0] || !draftRange[1]) {
                    return;
                }
                setCustomValue(column.name, [
                    dayjs(draftRange[0]),
                    dayjs(draftRange[1]),
                ]);
                setVisible(false);
            }}>
                                {t('common::action.confirm')}
                            </Button>
                        </Space>
                    </div>
                </Popup>
            </div>);
    }
    if (column.viewType === 'RefAttr' && column.refProps) {
        const entityIds = Array.isArray(value)
            ? value
            : value
                ? [value]
                : [];
        return (<div className={Style.item}>
                <RefAttr placeholder={column.resolvedPlaceholder} multiple={column.multiple} entityIds={entityIds} pickerRender={column.refProps} onChange={(ids) => {
                const nextValue = column.multiple ? ids : ids[0];
                setColumnValue(column.name, nextValue, true);
            }}/>
            </div>);
    }
    return null;
}
export default function SearchPanelMobileRender(props) {
    const { resolvedColumns = [], displayColumns = [], values = {}, expandable, isExpanded, } = props.data;
    const { t } = props.methods;
    if (!resolvedColumns.length) {
        return null;
    }
    return (<div className={Style.container}>
            {displayColumns.map((column) => (<MobileColumnControl key={column.name} column={column} value={values[column.name]} t={t} setColumnValue={props.methods.setColumnValue} clearColumnValue={props.methods.clearColumnValue} commitColumnValue={props.methods.commitColumnValue} handleInputChange={props.methods.handleInputChange} setCustomValue={props.methods.setCustomValue}/>))}
            {expandable && (<button type="button" className={Style.toggle} onClick={props.methods.toggleExpand}>
                    {isExpanded ? t('common::shrink') : t('common::expand')}
                </button>)}
        </div>);
}