/**
 * amis-ui v6.12.0-beta.0
 * Copyright 2018-2025 fex
 */

import { __read, __assign, __spreadArray } from 'tslib';
import React__default, { memo, useState, useEffect } from 'react';
import { themeable, localeable, uncontrollable } from 'amis-core';
import Button from './Button.js';
import Column from './PickerColumn.js';

function fixToArray(data) {
    if (!Array.isArray(data)) {
        return [data];
    }
    return data;
}
var Picker = memo(function (props) {
    var title = props.title, labelField = props.labelField, valueField = props.valueField, _a = props.visibleItemCount, visibleItemCount = _a === void 0 ? 5 : _a, _b = props.value, value = _b === void 0 ? [] : _b, _c = props.swipeDuration, swipeDuration = _c === void 0 ? 1000 : _c, _d = props.columns, columns = _d === void 0 ? [] : _d, _e = props.itemHeight, itemHeight = _e === void 0 ? 48 : _e, _f = props.showToolbar, showToolbar = _f === void 0 ? true : _f, _g = props.className, className = _g === void 0 ? '' : _g, _h = props.highlightTxt, highlightTxt = _h === void 0 ? '' : _h, cx = props.classnames, ns = props.classPrefix, __ = props.translate;
    var _columns = fixToArray(columns);
    var _j = __read(useState(fixToArray(props.value === undefined ? props.defaultValue || [] : value)), 2), innerValue = _j[0], setInnerValue = _j[1];
    useEffect(function () {
        if (value === innerValue)
            return;
        setInnerValue(fixToArray(value));
    }, [value]);
    var close = function () {
        if (props.onClose) {
            props.onClose(innerValue);
        }
    };
    var confirm = function () {
        if (props.onConfirm) {
            props.onConfirm(innerValue);
        }
    };
    var onChange = function (itemValue, columnIndex, confirm) {
        var nextInnerValue = __spreadArray([], __read(innerValue), false);
        nextInnerValue[columnIndex] = itemValue;
        setInnerValue(nextInnerValue);
        if (props.onChange) {
            props.onChange(nextInnerValue, columnIndex, confirm);
        }
    };
    var renderColumnItem = function (item, index) {
        return (React__default.createElement(Column, __assign({}, item, { highlightTxt: highlightTxt, classnames: cx, classPrefix: ns, labelField: labelField || item.labelField, valueField: valueField || item.valueField, itemHeight: itemHeight, swipeDuration: swipeDuration, visibleItemCount: visibleItemCount, value: innerValue[index], onChange: function (val, i, confirm) {
                onChange(val, index, confirm);
            }, key: "column".concat(index) })));
    };
    var wrapHeight = itemHeight * +visibleItemCount;
    var frameStyle = { height: "".concat(itemHeight, "px") };
    var columnsStyle = { height: "".concat(wrapHeight, "px") };
    var maskStyle = {
        backgroundSize: "100% ".concat((wrapHeight - itemHeight) / 2, "px")
    };
    var hasHeader = showToolbar || title;
    return (React__default.createElement("div", { className: cx(className, 'PickerColumns', 'PickerColumns-popOver') },
        hasHeader && (React__default.createElement("div", { className: cx('PickerColumns-header') },
            showToolbar && (React__default.createElement(Button, { className: "PickerColumns-cancel", level: "link", onClick: close }, __('cancel'))),
            title && React__default.createElement("div", { className: cx('PickerColumns-title') }, title),
            showToolbar && (React__default.createElement(Button, { className: "PickerColumns-confirm", level: "link", onClick: confirm }, __('confirm'))))),
        React__default.createElement("div", { className: cx('PickerColumns-columns'), style: columnsStyle },
            _columns.map(function (column, index) {
                return renderColumnItem(column, index);
            }),
            React__default.createElement("div", { className: cx('PickerColumns-mask'), style: maskStyle }),
            React__default.createElement("div", { className: cx('PickerColumns-frame'), style: frameStyle }))));
});
var Picker$1 = themeable(localeable(uncontrollable(Picker, {
    value: 'onChange'
})));

export { Picker$1 as default };
