import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useMemo, useState, useCallback } from 'react';
import { Input } from '../Input/Input.js';
import { FormLabel } from '../FormLabel/FormLabel.js';
import { InputCreditCardTheme } from './InputCreditCard.theme.js';

/**
 * InputCreditCard component for collecting credit card information
 * Displays a multi-field form for credit card entry with properly connected borders
 *
 * @example
 * ```tsx
 * <InputCreditCard
 *   legendText="Payment Information"
 *   expiryDateLabel="Expiry Date"
 *   cvcLabel="CVC"
 *   onCardNumberChange={(number) => console.log(number)}
 *   onExpiryDateChange={(date) => console.log(date)}
 *   onCvcChange={(cvc) => console.log(cvc)}
 * />
 * ```
 */
const InputCreditCard = React__default.forwardRef(({ onCardNumberChange, onExpiryDateChange, onCvcChange, expiryDateLabel = "MM / YY", cvcLabel = "CVC", legendText = "Payment Information", cardNumberInputProps = {}, expiryDateInputProps = {}, cvcInputProps = {}, className = "", theme = {}, }, ref) => {
    // Merge the default theme with the provided theme overrides
    const mergedTheme = useMemo(() => ({
        ...InputCreditCardTheme,
        ...theme,
        expiryDateInput: {
            ...InputCreditCardTheme.expiryDateInput,
            ...theme.expiryDateInput,
        },
        cvcInput: {
            ...InputCreditCardTheme.cvcInput,
            ...theme.cvcInput,
        },
    }), [theme]);
    // State for card details
    const [cardNumber, setCardNumber] = useState("");
    const [expiryDate, setExpiryDate] = useState("");
    const [cvc, setCvc] = useState("");
    const [focused, setFocused] = useState(null);
    // Handle card number change
    const handleCardNumberChange = useCallback((e) => {
        const newCardNumber = e.target.value;
        setCardNumber(newCardNumber);
        onCardNumberChange === null || onCardNumberChange === void 0 ? void 0 : onCardNumberChange(newCardNumber);
    }, [onCardNumberChange]);
    // Handle expiry date change
    const handleExpiryDateChange = useCallback((e) => {
        const newExpiryDate = e.target.value;
        setExpiryDate(newExpiryDate);
        onExpiryDateChange === null || onExpiryDateChange === void 0 ? void 0 : onExpiryDateChange(newExpiryDate);
    }, [onExpiryDateChange]);
    // Handle CVC change
    const handleCvcChange = useCallback((e) => {
        const newCvc = e.target.value;
        setCvc(newCvc);
        onCvcChange === null || onCvcChange === void 0 ? void 0 : onCvcChange(newCvc);
    }, [onCvcChange]);
    // Handle focus states
    const handleFocus = useCallback((field) => {
        setFocused(field);
    }, []);
    const handleBlur = useCallback(() => {
        setFocused(null);
    }, []);
    // Create unique IDs for accessibility
    useMemo(() => `card-fieldset-${Math.random().toString(36).substring(2, 9)}`, []);
    const cardNumberId = useMemo(() => `card-number-${Math.random().toString(36).substring(2, 9)}`, []);
    const expiryDateId = useMemo(() => `expiry-date-${Math.random().toString(36).substring(2, 9)}`, []);
    const cvcId = useMemo(() => `cvc-${Math.random().toString(36).substring(2, 9)}`, []);
    return (jsxs("div", { ref: ref, className: `w-full ${className}`, "data-testid": "input-credit-card-fieldset", children: [jsx(FormLabel, { htmlFor: cardNumberId, className: mergedTheme.legendStyles, children: legendText }), jsxs("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-credit-card-content", children: [jsx("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-card-number", children: jsx(Input, { id: cardNumberId, type: "creditCard", value: cardNumber, onChange: handleCardNumberChange, placeholder: "Card Number", "aria-label": "card number", onFocus: () => handleFocus("cardNumber"), onBlur: handleBlur, inputGroupClassName: "rounded-b-none", ...cardNumberInputProps }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative", children: [jsx("div", { className: `${mergedTheme.expiryDateWrapperStyles || ""} w-full sm:pr-0`, "data-testid": "input-expiry-date relative focus-within:z-10", children: jsx(Input, { id: expiryDateId, type: "expiryDate", value: expiryDate, onChange: handleExpiryDateChange, placeholder: expiryDateLabel, "aria-label": expiryDateLabel, onFocus: () => handleFocus("expiryDate"), onBlur: handleBlur, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none relative focus-within:z-10", ...expiryDateInputProps }) }), jsx("div", { className: `${mergedTheme.cvcWrapperStyles || ""} w-full`, "data-testid": "input-cvc relative focus-within:z-10", children: jsx(Input, { id: cvcId, type: "tel", maxLength: 3, pattern: "[0-9]*", inputMode: "numeric", value: cvc, onChange: handleCvcChange, placeholder: cvcLabel, "aria-label": cvcLabel, onFocus: () => handleFocus("cvc"), onBlur: handleBlur, inputGroupClassName: " sm:rounded-br-md rounded-t-none rounded-bl-md sm:rounded-bl-none relative focus-within:z-10", ...cvcInputProps }) })] })] })] }));
});
InputCreditCard.displayName = "InputCreditCard";

export { InputCreditCard };
