/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DataType } from '@datashaper/schema';
import { coerce } from '@datashaper/tables';
import { Dropdown, SpinButton } from '@fluentui/react';
import { memo, useCallback } from 'react';
import { CalendarPicker } from '../../controls/index.js';
import { narrowerDropdownStyles } from '../../styles.js';
import { Container, TextValue } from './DataTypeField.styles.js';
export const DataTypeField = /*#__PURE__*/ memo(function DataTypeField({ dataType , keyValue , value , placeholder , onKeyChange , onValueChange , isKey ,  }) {
    const booleanOptions = [
        {
            key: 'true',
            text: 'true'
        },
        {
            key: 'false',
            text: 'false'
        }
    ];
    const onSelectDate = useCallback((date)=>{
        const val = coerce(date, dataType);
        isKey ? onKeyChange(new Date(value).toISOString(), new Date(val).toISOString()) : onValueChange(new Date(keyValue).toISOString(), new Date(val).toISOString());
    }, [
        onKeyChange,
        onValueChange,
        dataType,
        isKey,
        value,
        keyValue
    ]);
    const onChangeTextFieldValue = useCallback((_event, newValue)=>{
        const val = coerce(newValue, dataType);
        isKey ? onKeyChange(value.toString(), val.toString()) : onValueChange(keyValue, val);
    }, [
        onKeyChange,
        onValueChange,
        dataType,
        isKey,
        value,
        keyValue
    ]);
    const spinButtonOnChange = useCallback((_event, newValue)=>{
        if (newValue != null) {
            const val = coerce(newValue, dataType);
            isKey ? onKeyChange(value, val) : onValueChange(keyValue, val);
        }
    }, [
        onKeyChange,
        onValueChange,
        dataType,
        isKey,
        value,
        keyValue
    ]);
    const dropDownOnChange = useCallback((_e, newValue)=>{
        if (newValue != null) {
            isKey ? onKeyChange(value, newValue.key) : onValueChange(keyValue, newValue.key === 'true' ? true : false);
        }
    }, [
        onKeyChange,
        onValueChange,
        isKey,
        value,
        keyValue
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            dataType === DataType.Date ? /*#__PURE__*/ _jsx(CalendarPicker, {
                onSelectDate: onSelectDate,
                value: value
            }) : null,
            dataType === DataType.String ? /*#__PURE__*/ _jsx(TextValue, {
                onChange: onChangeTextFieldValue,
                placeholder: placeholder,
                value: value,
                styles: narrowerDropdownStyles
            }) : null,
            dataType === DataType.Number ? /*#__PURE__*/ _jsx(SpinButton, {
                min: 0,
                step: 1,
                value: value,
                styles: narrowerDropdownStyles,
                onChange: spinButtonOnChange
            }) : null,
            dataType === DataType.Boolean ? /*#__PURE__*/ _jsx(Dropdown, {
                selectedKey: value.toString(),
                options: booleanOptions,
                styles: narrowerDropdownStyles,
                onChange: dropDownOnChange
            }) : null
        ]
    });
});
