'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React, { useCallback, useMemo } from 'react';
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
import { FieldDescription } from '../../fields/FieldDescription/index.js';
import { FieldError } from '../../fields/FieldError/index.js';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { useField } from '../../forms/useField/index.js';
import { withCondition } from '../../forms/withCondition/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { mergeFieldStyles } from '../mergeFieldStyles.js';
import './index.scss';
import { fieldBaseClass } from '../shared/index.js';
const baseClass = 'point';
export const PointFieldComponent = (props)=>{
    const { field, field: { admin: { className, description, placeholder, step } = {}, label, localized, required }, path: pathFromProps, readOnly, validate } = props;
    const { i18n, t } = useTranslation();
    const memoizedValidate = useCallback((value, options)=>{
        if (typeof validate === 'function') {
            return validate(value, {
                ...options,
                required
            });
        }
    }, [
        validate,
        required
    ]);
    const { customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {}, disabled, path, setValue, showError, value = [
        null,
        null
    ] } = useField({
        potentiallyStalePath: pathFromProps,
        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
    ]);
    const getCoordinateFieldLabel = (type)=>{
        const suffix = type === 'longitude' ? t('fields:longitude') : t('fields:latitude');
        const fieldLabel = label ? getTranslation(label, i18n) : '';
        return `${fieldLabel}${fieldLabel ? ' - ' : ''}${suffix}`;
    };
    const styles = useMemo(()=>mergeFieldStyles(field), [
        field
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            fieldBaseClass,
            baseClass,
            className,
            showError && 'error',
            (readOnly || disabled) && 'read-only'
        ].filter(Boolean).join(' '),
        style: styles,
        children: [
            /*#__PURE__*/ _jsxDEV("ul", {
                className: `${baseClass}__wrap`,
                children: [
                    /*#__PURE__*/ _jsxDEV("li", {
                        children: [
                            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                CustomComponent: Label,
                                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                                    label: getCoordinateFieldLabel('longitude'),
                                    localized: localized,
                                    path: path,
                                    required: required
                                }, void 0, false, {
                                    fileName: "src/fields/Point/index.tsx",
                                    lineNumber: 97,
                                    columnNumber: 15
                                }, void 0)
                            }, void 0, false, {
                                fileName: "src/fields/Point/index.tsx",
                                lineNumber: 94,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: "input-wrapper",
                                children: [
                                    BeforeInput,
                                    /* disable eslint rule because the label is dynamic */ /* eslint-disable-next-line jsx-a11y/control-has-associated-label */ /*#__PURE__*/ _jsxDEV("input", {
                                        disabled: readOnly || disabled,
                                        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] : ''
                                    }, void 0, false, {
                                        fileName: "src/fields/Point/index.tsx",
                                        lineNumber: 109,
                                        columnNumber: 13
                                    }, this),
                                    AfterInput
                                ]
                            }, void 0, true, {
                                fileName: "src/fields/Point/index.tsx",
                                lineNumber: 105,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/fields/Point/index.tsx",
                        lineNumber: 93,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("li", {
                        children: [
                            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                CustomComponent: Label,
                                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                                    label: getCoordinateFieldLabel('latitude'),
                                    localized: localized,
                                    path: path,
                                    required: required
                                }, void 0, false, {
                                    fileName: "src/fields/Point/index.tsx",
                                    lineNumber: 126,
                                    columnNumber: 15
                                }, void 0)
                            }, void 0, false, {
                                fileName: "src/fields/Point/index.tsx",
                                lineNumber: 123,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: "input-wrapper",
                                children: [
                                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                        CustomComponent: Error,
                                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
                                            path: path,
                                            showError: showError
                                        }, void 0, false, {
                                            fileName: "src/fields/Point/index.tsx",
                                            lineNumber: 137,
                                            columnNumber: 25
                                        }, void 0)
                                    }, void 0, false, {
                                        fileName: "src/fields/Point/index.tsx",
                                        lineNumber: 135,
                                        columnNumber: 13
                                    }, this),
                                    BeforeInput,
                                    /* disable eslint rule because the label is dynamic */ /* eslint-disable-next-line jsx-a11y/control-has-associated-label */ /*#__PURE__*/ _jsxDEV("input", {
                                        disabled: readOnly || disabled,
                                        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] : ''
                                    }, void 0, false, {
                                        fileName: "src/fields/Point/index.tsx",
                                        lineNumber: 142,
                                        columnNumber: 13
                                    }, this),
                                    AfterInput
                                ]
                            }, void 0, true, {
                                fileName: "src/fields/Point/index.tsx",
                                lineNumber: 134,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/fields/Point/index.tsx",
                        lineNumber: 122,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Point/index.tsx",
                lineNumber: 92,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Description,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
                    description: description,
                    path: path
                }, void 0, false, {
                    fileName: "src/fields/Point/index.tsx",
                    lineNumber: 158,
                    columnNumber: 19
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/Point/index.tsx",
                lineNumber: 156,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/Point/index.tsx",
        lineNumber: 80,
        columnNumber: 5
    }, this);
};
export const PointField = withCondition(PointFieldComponent);

//# sourceMappingURL=index.js.map