'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import { text } from 'payload/shared';
import React, { useEffect, useMemo, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { Button } from '../../../elements/Button/index.js';
import { CopyToClipboard } from '../../../elements/CopyToClipboard/index.js';
import { GenerateConfirmation } from '../../../elements/GenerateConfirmation/index.js';
import { useFormFields } from '../../../forms/Form/context.js';
import { useField } from '../../../forms/useField/index.js';
import { EyeIcon } from '../../../icons/Eye/index.js';
import { useConfig } from '../../../providers/Config/index.js';
import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
const path = 'apiKey';
const baseClass = 'api-key';
const fieldBaseClass = 'field-type';
export const APIKey = ({ enabled, readOnly })=>{
    const [initialAPIKey] = useState(uuidv4());
    const [highlightedField, setHighlightedField] = useState(false);
    const [showKey, setShowKey] = useState(false);
    const { i18n, t } = useTranslation();
    const { config, getEntityConfig } = useConfig();
    const { collectionSlug } = useDocumentInfo();
    const apiKey = useFormFields(([fields])=>fields && fields[path] || null);
    const apiKeyField = getEntityConfig({
        collectionSlug
    })?.fields?.find((field)=>'name' in field && field.name === 'apiKey');
    const validate = (val)=>text(val, {
            name: 'apiKey',
            type: 'text',
            blockData: {},
            data: {},
            event: 'onChange',
            maxLength: 48,
            minLength: 24,
            path: [
                'apiKey'
            ],
            preferences: {
                fields: {}
            },
            req: {
                payload: {
                    config
                },
                t
            },
            siblingData: {}
        });
    const apiKeyValue = apiKey?.value;
    const apiKeyLabel = useMemo(()=>{
        let label = 'API Key';
        if (apiKeyField?.label) {
            label = apiKeyField.label;
        }
        return getTranslation(label, i18n);
    }, [
        apiKeyField,
        i18n
    ]);
    const APIKeyLabel = useMemo(()=>/*#__PURE__*/ _jsxDEV("label", {
            className: `${baseClass}__label field-label`,
            htmlFor: "apiKey",
            children: [
                /*#__PURE__*/ _jsxDEV("span", {
                    children: apiKeyLabel
                }, void 0, false, {
                    fileName: "src/views/Edit/Auth/APIKey.tsx",
                    lineNumber: 75,
                    columnNumber: 9
                }, this),
                /*#__PURE__*/ _jsxDEV(CopyToClipboard, {
                    value: apiKeyValue
                }, void 0, false, {
                    fileName: "src/views/Edit/Auth/APIKey.tsx",
                    lineNumber: 76,
                    columnNumber: 9
                }, this)
            ]
        }, void 0, true, {
            fileName: "src/views/Edit/Auth/APIKey.tsx",
            lineNumber: 74,
            columnNumber: 7
        }, this), [
        apiKeyLabel,
        apiKeyValue
    ]);
    const fieldType = useField({
        path: 'apiKey',
        validate
    });
    const highlightField = ()=>{
        if (highlightedField) {
            setHighlightedField(false);
        }
        setTimeout(()=>{
            setHighlightedField(true);
        }, 1);
    };
    const { setValue, value } = fieldType;
    useEffect(()=>{
        if (!apiKeyValue && enabled) {
            setValue(initialAPIKey);
        }
        if (!enabled && apiKeyValue) {
            setValue(null);
        }
    }, [
        apiKeyValue,
        enabled,
        setValue,
        initialAPIKey
    ]);
    useEffect(()=>{
        if (highlightedField) {
            setTimeout(()=>{
                setHighlightedField(false);
            }, 10000);
        }
    }, [
        highlightedField
    ]);
    if (!enabled) {
        return null;
    }
    return /*#__PURE__*/ _jsxDEV(React.Fragment, {
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: [
                    fieldBaseClass,
                    'api-key',
                    'read-only'
                ].filter(Boolean).join(' '),
                children: [
                    APIKeyLabel,
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__input-wrap`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("input", {
                                "aria-label": apiKeyLabel,
                                className: highlightedField ? 'highlight' : undefined,
                                disabled: true,
                                id: "apiKey",
                                name: "apiKey",
                                type: showKey ? 'text' : 'password',
                                value: value || ''
                            }, void 0, false, {
                                fileName: "src/views/Edit/Auth/APIKey.tsx",
                                lineNumber: 124,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__toggle-button-wrap`,
                                children: /*#__PURE__*/ _jsxDEV(Button, {
                                    buttonStyle: "none",
                                    className: `${baseClass}__toggle-button`,
                                    icon: /*#__PURE__*/ _jsxDEV(EyeIcon, {
                                        active: showKey
                                    }, void 0, false, {
                                        fileName: "src/views/Edit/Auth/APIKey.tsx",
                                        lineNumber: 137,
                                        columnNumber: 21
                                    }, void 0),
                                    onClick: ()=>setShowKey((prev)=>!prev)
                                }, void 0, false, {
                                    fileName: "src/views/Edit/Auth/APIKey.tsx",
                                    lineNumber: 134,
                                    columnNumber: 13
                                }, this)
                            }, void 0, false, {
                                fileName: "src/views/Edit/Auth/APIKey.tsx",
                                lineNumber: 133,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/views/Edit/Auth/APIKey.tsx",
                        lineNumber: 123,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/views/Edit/Auth/APIKey.tsx",
                lineNumber: 121,
                columnNumber: 7
            }, this),
            !readOnly && /*#__PURE__*/ _jsxDEV(GenerateConfirmation, {
                highlightField: highlightField,
                setKey: ()=>setValue(uuidv4())
            }, void 0, false, {
                fileName: "src/views/Edit/Auth/APIKey.tsx",
                lineNumber: 144,
                columnNumber: 9
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/views/Edit/Auth/APIKey.tsx",
        lineNumber: 120,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=APIKey.js.map