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 { inputAddressTheme } from './InputAddress.theme.js';

/**
 * InputAddress component for collecting address information
 * Displays a multi-field form for address entry with properly connected borders
 *
 * @example
 * ```tsx
 * <InputAddress
 *   legendText="Shipping Address"
 *   countryLabel="Country"
 *   postalCodeLabel="Postal Code"
 *   availableCountries={["United States", "Canada", "Mexico"]}
 *   onCountryChange={(country) => console.log(country)}
 *   onPostalCodeChange={(code) => console.log(code)}
 * />
 * ```
 */
const InputAddress = React__default.forwardRef(({ availableCountries = [], defaultCountry = "United States", onCountryChange, onPostalCodeChange, countryLabel = "Country", postalCodeLabel = "ZIP / Postal code", legendText = "Billing address", streetInputProps = {}, stateInputProps = {}, countryInputProps = {}, postalCodeInputProps = {}, className = "", theme = {}, }, ref) => {
    // Merge default theme with provided theme using useMemo for performance
    const mergedTheme = useMemo(() => ({
        ...inputAddressTheme,
        ...theme,
        countryInput: {
            ...inputAddressTheme.countryInput,
            ...theme.countryInput,
        },
        postalCodeInput: {
            ...inputAddressTheme.postalCodeInput,
            ...theme.postalCodeInput,
        },
    }), [theme]);
    // State for country and postal code
    const [country, setCountry] = useState(defaultCountry);
    const [postalCode, setPostalCode] = useState("");
    // Handle country change
    const handleCountryChange = useCallback((e) => {
        const newCountry = e.target.value;
        setCountry(newCountry);
        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(newCountry);
    }, [onCountryChange]);
    // Handle postal code change
    const handlePostalCodeChange = useCallback((e) => {
        const newPostalCode = e.target.value;
        setPostalCode(newPostalCode);
        onPostalCodeChange === null || onPostalCodeChange === void 0 ? void 0 : onPostalCodeChange(newPostalCode);
    }, [onPostalCodeChange]);
    // Filter available countries if array is provided
    useMemo(() => {
        if (availableCountries.length === 0)
            return [];
        return availableCountries;
    }, [availableCountries]);
    // Create unique IDs for accessibility
    useMemo(() => `address-fieldset-${Math.random().toString(36).substring(2, 9)}`, []);
    useMemo(() => `address-legend-${Math.random().toString(36).substring(2, 9)}`, []);
    const streetId = useMemo(() => `street-${Math.random().toString(36).substring(2, 9)}`, []);
    const stateId = useMemo(() => `state-${Math.random().toString(36).substring(2, 9)}`, []);
    const countryId = useMemo(() => `country-${Math.random().toString(36).substring(2, 9)}`, []);
    const postalCodeId = useMemo(() => `postal-code-${Math.random().toString(36).substring(2, 9)}`, []);
    return (jsxs("div", { ref: ref, className: `w-full ${className}`, "data-testid": "input-address-fieldset", children: [jsx(FormLabel, { htmlFor: streetId, className: mergedTheme.legendStyles, children: legendText }), jsxs("div", { className: `grid gap-0 ${mergedTheme.contentStyles}`, "data-testid": "input-address-content", children: [jsx("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-address-street", children: jsx(Input, { id: streetId, type: "text", placeholder: "Street address", "aria-label": "street address", inputGroupClassName: "rounded-b-none", ...streetInputProps }) }), jsx("div", { className: "w-full -mt-[0.5px] relative focus-within:z-10", "data-testid": "input-address-state", children: jsx(Input, { id: stateId, type: "text", placeholder: "State", "aria-label": "state", inputGroupClassName: "rounded-none", ...stateInputProps }) }), jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative focus-within:z-10", children: [jsx("div", { className: `${mergedTheme.countryWrapperStyles} w-full sm:pr-0 relative focus-within:z-10`, "data-testid": "input-address-country", children: jsx(Input, { id: countryId, type: "text", value: country, onChange: handleCountryChange, placeholder: countryLabel, "aria-label": countryLabel, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none", ...countryInputProps }) }), jsx("div", { className: `${mergedTheme.postalCodeWrapperStyles} w-full relative focus-within:z-10`, "data-testid": "input-address-postal", children: jsx(Input, { id: postalCodeId, type: "text", value: postalCode, onChange: handlePostalCodeChange, placeholder: postalCodeLabel, "aria-label": postalCodeLabel, inputGroupClassName: "sm:rounded-br-md rounded-t-none rounded-tl-none rounded-bl-md sm:rounded-bl-none", ...postalCodeInputProps }) })] })] })] }));
});
InputAddress.displayName = "InputAddress";

export { InputAddress };
