import { Input, InputNumber, Select } from "antd";
import React, { useState } from "react"


type Condition = '>' | '>=' | '<' | '<=' | '=';

interface PriceValue {
    value?: number
    condition?: Condition
}
interface Props {
    value?: PriceValue,
    onChange?: (value: PriceValue) => void;
    disabled?: boolean
}

/**
 * 自定义数据input
 * @param param0 
 */
const PriceInput: React.FC<Props> = ({ value = {}, onChange, disabled = false }) => {
    
    /**********************/
    const [number, setNumber] = useState(0);
    const [condition, setCondition] = useState<Condition>('>');
    /**********************/

    const triggerChange = (changedValue: { value?: number; condition?: Condition }) => {
        onChange?.({ value: number, condition, ...value, ...changedValue });
    };

    const onNumberChange = (value: number) => {
        setNumber(value);
        triggerChange({ value: value });
    };

    const onConditionChange = (newCondition: Condition) => {
        if (!('currency' in value)) {
            setCondition(newCondition);
        }
        triggerChange({ condition: newCondition });
    }

    return <span>
        <Select
            value={value.condition || condition}
            style={{ width: 100 }}
            disabled={disabled}
            onChange={onConditionChange}
        >
            <Select.Option value=">">大于</Select.Option>
            <Select.Option value=">=">大于等于</Select.Option>
            <Select.Option value="<">小于</Select.Option>
            <Select.Option value="<=">小于等于</Select.Option>
            <Select.Option value="=">等于</Select.Option>
        </Select>
        <InputNumber
            type="text"
            disabled={disabled}
            value={value.value || number}
            onChange={onNumberChange}
            style={{ width: 130, margin: '0 8px' }}
        />

    </span>
}

export default React.memo(PriceInput)