'use client';
import { getTranslation } from '@payloadcms/translations';
import React, { useCallback } from 'react';
import { useTranslation } from '../../../providers/Translation/index.js';
import LabelComp from '../../Label/index.js';
import useField from '../../useField/index.js';
import { withCondition } from '../../withCondition/index.js';
import { fieldBaseClass } from '../shared.js';
const baseClass = 'point';
const PointField = (props)=>{
    const { name, AfterInput, BeforeInput, Description, Error, Label: LabelFromProps, className, label, path: pathFromProps, placeholder, readOnly, required, style, validate, width } = props;
    const Label = LabelFromProps || /*#__PURE__*/ React.createElement(LabelComp, {
        label: label,
        required: required
    });
    const { i18n } = useTranslation();
    const step = 'step' in props ? props.step : 1;
    const memoizedValidate = useCallback((value, options)=>{
        if (typeof validate === 'function') {
            return validate(value, {
                ...options,
                required
            });
        }
    }, [
        validate,
        required
    ]);
    const { path, setValue, showError, value = [
        null,
        null
    ] } = useField({
        path: pathFromProps || name,
        validate: memoizedValidate
    });
    const handleChange = useCallback((e, index)=>{
        let val = parseFloat(e.target.value);
        if (Number.isNaN(val)) {
            val = e.target.value;
        }
        const coordinates = [
            ...value
        ];
        coordinates[index] = val;
        setValue(coordinates);
    }, [
        setValue,
        value
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            baseClass,
            className,
            showError && 'error',
            readOnly && 'read-only'
        ].filter(Boolean).join(' '),
        style: {
            ...style,
            width
        }
    }, Error, /*#__PURE__*/ React.createElement("ul", {
        className: `${baseClass}__wrap`
    }, /*#__PURE__*/ React.createElement("li", null, Label, /*#__PURE__*/ React.createElement("div", {
        className: "input-wrapper"
    }, BeforeInput, /*#__PURE__*/ React.createElement("input", {
        disabled: readOnly,
        id: `field-longitude-${path.replace(/\./g, '__')}`,
        name: `${path}.longitude`,
        onChange: (e)=>handleChange(e, 0),
        placeholder: getTranslation(placeholder, i18n),
        step: step,
        type: "number",
        value: value && typeof value[0] === 'number' ? value[0] : ''
    }), AfterInput)), /*#__PURE__*/ React.createElement("li", null, Label, /*#__PURE__*/ React.createElement("div", {
        className: "input-wrapper"
    }, BeforeInput, /*#__PURE__*/ React.createElement("input", {
        disabled: readOnly,
        id: `field-latitude-${path.replace(/\./g, '__')}`,
        name: `${path}.latitude`,
        onChange: (e)=>handleChange(e, 1),
        placeholder: getTranslation(placeholder, i18n),
        step: step,
        type: "number",
        value: value && typeof value[1] === 'number' ? value[1] : ''
    }), AfterInput))), Description);
};
export default withCondition(PointField);

//# sourceMappingURL=index.js.map