"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var material_1 = require("@mui/material");
var PriceInput_1 = __importDefault(require("./PriceInput"));
var react_router_dom_1 = require("react-router-dom");
var Number_1 = require("../Utilities/Format/Number");
var DatePicker_1 = __importDefault(require("./DatePicker"));
var TextFieldClearButton_1 = __importDefault(require("./TextFieldClearButton"));
var Card_1 = require("./Card");
var icons_material_1 = require("@mui/icons-material");
var useQueryParams_1 = __importDefault(require("../Effect/useQueryParams"));
var SelectClearButton_1 = __importDefault(require("./SelectClearButton/SelectClearButton"));
var ButtonProgress_1 = __importDefault(require("./Button/ButtonProgress"));
var Button_1 = require("./Button");
var textFieldInputProps = { startAdornment: React.createElement(material_1.InputAdornment, { position: 'start' },
        React.createElement(icons_material_1.Search, null)) };
var DevelopInputs = function () {
    var navigate = (0, react_router_dom_1.useNavigate)();
    var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
    var id = (0, react_router_dom_1.useParams)().id;
    var _b = (0, useQueryParams_1.default)({}), _c = _b[0], value = _c.value, dateStart = _c.dateStart, dateEnd = _c.dateEnd, update = _b[1], urlSearchParams = _b[2];
    var _d = React.useState(['test 1']), multipleSelectValue = _d[0], setMultipleSelectValue = _d[1];
    var _e = React.useState('test 1'), selectValue = _e[0], setSelectValue = _e[1];
    var handleMultipleSelectUpdate = React.useCallback(function (_value) { return setMultipleSelectValue(_value); }, [setMultipleSelectValue]);
    var testDatePickerdateStart = React.useMemo(function () { return dateStart ? new Date(dateStart) : null; }, [dateStart]);
    var testDatePickerdateEnd = React.useMemo(function () { return dateEnd ? new Date(dateEnd) : null; }, [dateEnd]);
    var setTestDatePickerValue = React.useCallback(function (dates) {
        var _a, _b;
        var start = dates[0], end = dates[1];
        update({
            dateStart: (_a = start === null || start === void 0 ? void 0 : start.toJSON) === null || _a === void 0 ? void 0 : _a.call(start),
            dateEnd: (_b = end === null || end === void 0 ? void 0 : end.toJSON) === null || _b === void 0 ? void 0 : _b.call(end),
        });
    }, [update]);
    var handleTextFieldUpdate = function (newVal) {
        update({ value: newVal });
    };
    return (React.createElement(material_1.Card, null,
        React.createElement(Card_1.AppCardHeader, { title: 'Test', titleIcon: React.createElement(icons_material_1.Warning, { color: 'secondary' }), isLoading: loading, 
            // eslint-disable-next-line no-console
            onRefresh: console.log, headerActions: React.createElement(material_1.Button, { variant: 'contained', onClick: function () { return setLoading(function (prev) { return !prev; }); }, color: 'secondary' }, "test") }),
        React.createElement(Card_1.AppCardContent, null,
            React.createElement(material_1.Grid, { container: true, spacing: 2 },
                React.createElement(material_1.Grid, { item: true },
                    React.createElement(ButtonProgress_1.default, { inProgress: loading, variant: 'contained', color: 'primary' }, "test"),
                    React.createElement(ButtonProgress_1.default, { size: 'small', inProgress: loading, variant: 'contained', color: 'primary', startIcon: React.createElement(icons_material_1.Fingerprint, null) }, "test"),
                    React.createElement(Button_1.IconButtonProgress, { inProgress: loading, size: 'small', color: 'secondary' },
                        React.createElement(icons_material_1.Refresh, { fontSize: 'small' })),
                    React.createElement(Button_1.IconButtonProgress, { inProgress: loading, color: 'secondary' },
                        React.createElement(icons_material_1.Refresh, { fontSize: 'medium' })),
                    React.createElement(Button_1.IconButtonProgress, { inProgress: loading, size: 'large', color: 'secondary' },
                        React.createElement(icons_material_1.Refresh, { fontSize: 'large' }))),
                React.createElement(material_1.Grid, { item: true },
                    React.createElement(DatePicker_1.default, { onChange: setTestDatePickerValue, textFieldProps: {
                            label: 'Datepicker',
                            name: 'datepicker__textfield',
                            id: 'datepicker__textfield',
                            InputProps: textFieldInputProps
                        }, startDate: testDatePickerdateStart, endDate: testDatePickerdateEnd, selectsRange: true, name: 'datepicker' })),
                React.createElement(material_1.Grid, { item: true },
                    React.createElement(PriceInput_1.default, { value: (0, Number_1.parse)(id), label: 'clearable price input', onChange: function (event) {
                            var _a;
                            navigate({ pathname: "/start/".concat((_a = event.target.value) !== null && _a !== void 0 ? _a : ''), search: urlSearchParams.toString() });
                        } })),
                React.createElement(material_1.Grid, { item: true, display: 'flex', gap: 1 },
                    React.createElement(TextFieldClearButton_1.default, { label: 'Textfield outlined', onChange: function (e) { return handleTextFieldUpdate(e.target.value); }, value: value, variant: 'outlined' }),
                    React.createElement(TextFieldClearButton_1.default, { label: 'Textfield filled', onChange: function (e) { return handleTextFieldUpdate(e.target.value); }, value: value, variant: 'filled' }),
                    React.createElement(TextFieldClearButton_1.default, { label: 'Textfield default standard', onChange: function (e) { return handleTextFieldUpdate(e.target.value); }, value: value, variant: 'standard' })),
                React.createElement(material_1.Grid, { item: true, xs: 4 },
                    React.createElement(SelectClearButton_1.default, { variant: 'outlined', label: 'Single select', value: value, onChange: handleTextFieldUpdate, options: [
                            { value: 'test 1', label: 'Test 1' },
                            { value: 'test 2', label: 'Test 2' },
                            { value: 'test 3', label: 'Test 3' },
                            { value: 'test 4', label: 'Test 4' },
                            { value: 'DasIstEinSehrLangerWert', label: 'Das ist ein sehr langer Wert' },
                            {
                                value: 'DasIstEinSehrLangerWertMal2',
                                label: 'Das ist ein sehr langer Wert Das ist ein sehr langer Wert'
                            },
                        ] })),
                React.createElement(material_1.Grid, { item: true, xs: 4 },
                    React.createElement(SelectClearButton_1.default
                    // fullWidth
                    , { 
                        // fullWidth
                        label: 'Multiple select', value: multipleSelectValue, onChange: handleMultipleSelectUpdate, 
                        // loading
                        // clearButtonSize={'small'}
                        multiple: true, 
                        // maxValuesToDisplayInInput={2}
                        options: [
                            { value: 'test 1', label: 'Test 1 Das ist ein sehr langer Wert Wert Wert Wert' },
                            { value: 'test 2', label: 'Test 2' },
                            { value: 'test 3', label: 'Test 3' },
                            { value: 'test 4', label: 'Test 4' },
                            { value: 'DasIstEinSehrLangerWert', label: 'Das ist ein sehr langer Wert' },
                            {
                                value: 'DasIstEinSehrLangerWertMal2',
                                label: 'Das ist ein sehr langer Wert Das ist ein sehr langer Wert'
                            },
                        ] })),
                React.createElement(material_1.Grid, { item: true, xs: 4 },
                    React.createElement(SelectClearButton_1.default, { multiple: true, value: multipleSelectValue, onChange: handleMultipleSelectUpdate, renderAsChip: false },
                        React.createElement(material_1.MenuItem, { value: 'custom1' }, "custom menuitems"),
                        React.createElement(material_1.MenuItem, { value: 'custom2' }, "als  children")))))));
};
exports.default = DevelopInputs;
