/**
 * Addresses Page Component
 *
 * @package Advanced_Customer_Account
 */

import { useEffect, useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

// Components
import { Card, LoadingSpinner, Notice } from '../components/Common';
import AddressForm from '../components/Addresses/AddressForm';

/**
 * Format address for display.
 *
 * @param {Object} address Address object.
 * @return {string[]} Formatted address lines.
 */
const formatAddressLines = ( address ) => {
    if ( ! address ) {
        return [];
    }

    const lines = [];

    if ( address.first_name || address.last_name ) {
        lines.push( `${ address.first_name || '' } ${ address.last_name || '' }`.trim() );
    }
    if ( address.company ) {
        lines.push( address.company );
    }
    if ( address.address_1 ) {
        lines.push( address.address_1 );
    }
    if ( address.address_2 ) {
        lines.push( address.address_2 );
    }
    if ( address.city || address.state || address.postcode ) {
        lines.push( [ address.city, address.state, address.postcode ].filter( Boolean ).join( ', ' ) );
    }
    if ( address.country ) {
        lines.push( address.country );
    }

    return lines;
};

/**
 * Check if address is empty.
 *
 * @param {Object} address Address object.
 * @return {boolean} Whether address is empty.
 */
const isAddressEmpty = ( address ) => {
    if ( ! address ) {
        return true;
    }

    return ! address.first_name && ! address.last_name && ! address.address_1;
};

/**
 * Addresses page component.
 *
 * @param {Object}   props          Component props.
 * @param {Function} props.navigate Navigate function.
 * @return {JSX.Element} Addresses page.
 */
const Addresses = ( { navigate } ) => {
    const { fetchAddresses, fetchCountries, clearMessages } = useDispatch( 'aca/profile' );
    const [ editingAddress, setEditingAddress ] = useState( null ); // 'billing' or 'shipping'

    const { addresses, countries, isLoading, isSaving, error, successMessage } = useSelect(
        ( select ) => {
            const profileStore = select( 'aca/profile' );
            return {
                addresses: profileStore.getAddresses(),
                countries: profileStore.getCountries(),
                isLoading: profileStore.isLoading(),
                isSaving: profileStore.isSaving(),
                error: profileStore.getError(),
                successMessage: profileStore.getSuccessMessage(),
            };
        },
        []
    );

    // Fetch addresses and countries on mount
    useEffect( () => {
        fetchAddresses();
        fetchCountries();

        return () => {
            clearMessages();
        };
    }, [ fetchAddresses, fetchCountries, clearMessages ] );

    // Handle edit click
    const handleEdit = ( type ) => {
        setEditingAddress( type );
    };

    // Handle cancel edit
    const handleCancelEdit = () => {
        setEditingAddress( null );
        clearMessages();
    };

    // Handle save success
    const handleSaveSuccess = () => {
        setEditingAddress( null );
    };

    if ( isLoading && ! addresses.billing && ! addresses.shipping ) {
        return <LoadingSpinner fullPage message={ __( 'Loading addresses...', 'advanced-customer-account' ) } />;
    }

    return (
        <div className="aca-addresses-page">
            { /* Notifications */ }
            { error && ! editingAddress && (
                <Notice
                    type="error"
                    message={ error }
                    onDismiss={ () => clearMessages() }
                />
            ) }

            { successMessage && ! editingAddress && (
                <Notice
                    type="success"
                    message={ successMessage }
                    onDismiss={ () => clearMessages() }
                    autoDismiss={ 5000 }
                />
            ) }

            <p className="aca-addresses-page__intro">
                { __( 'The following addresses will be used on the checkout page by default.', 'advanced-customer-account' ) }
            </p>

            <div className="aca-addresses-page__grid">
                { /* Billing Address */ }
                <Card
                    title={ __( 'Billing Address', 'advanced-customer-account' ) }
                    className="aca-addresses-page__card"
                    actions={
                        ! editingAddress && (
                            <button
                                type="button"
                                className="aca-btn aca-btn--link"
                                onClick={ () => handleEdit( 'billing' ) }
                            >
                                { __( 'Edit', 'advanced-customer-account' ) }
                            </button>
                        )
                    }
                >
                    { editingAddress === 'billing' ? (
                        <AddressForm
                            type="billing"
                            address={ addresses.billing }
                            countries={ countries }
                            onCancel={ handleCancelEdit }
                            onSuccess={ handleSaveSuccess }
                            isSaving={ isSaving }
                        />
                    ) : isAddressEmpty( addresses.billing ) ? (
                        <p className="aca-addresses-page__empty">
                            { __( 'You have not set up this address yet.', 'advanced-customer-account' ) }
                        </p>
                    ) : (
                        <address className="aca-address">
                            { formatAddressLines( addresses.billing ).map( ( line, index ) => (
                                <span key={ index }>
                                    { line }
                                    <br />
                                </span>
                            ) ) }
                            { addresses.billing?.email && (
                                <span className="aca-address__email">{ addresses.billing.email }</span>
                            ) }
                            { addresses.billing?.phone && (
                                <span className="aca-address__phone">{ addresses.billing.phone }</span>
                            ) }
                        </address>
                    ) }
                </Card>

                { /* Shipping Address */ }
                <Card
                    title={ __( 'Shipping Address', 'advanced-customer-account' ) }
                    className="aca-addresses-page__card"
                    actions={
                        ! editingAddress && (
                            <button
                                type="button"
                                className="aca-btn aca-btn--link"
                                onClick={ () => handleEdit( 'shipping' ) }
                            >
                                { __( 'Edit', 'advanced-customer-account' ) }
                            </button>
                        )
                    }
                >
                    { editingAddress === 'shipping' ? (
                        <AddressForm
                            type="shipping"
                            address={ addresses.shipping }
                            countries={ countries }
                            onCancel={ handleCancelEdit }
                            onSuccess={ handleSaveSuccess }
                            isSaving={ isSaving }
                        />
                    ) : isAddressEmpty( addresses.shipping ) ? (
                        <p className="aca-addresses-page__empty">
                            { __( 'You have not set up this address yet.', 'advanced-customer-account' ) }
                        </p>
                    ) : (
                        <address className="aca-address">
                            { formatAddressLines( addresses.shipping ).map( ( line, index ) => (
                                <span key={ index }>
                                    { line }
                                    <br />
                                </span>
                            ) ) }
                        </address>
                    ) }
                </Card>
            </div>
        </div>
    );
};

export default Addresses;