nshop-front-pc/src/app/(checkout)/checkout/_components/CheckoutAddress/ShippingAddressCheckout.tsx

"use client";

import {useMemo,useEffect, useState, useCallback} from "react";
import clsx from "clsx";
import { useQuery } from "@apollo/client/react";
import { 
    useFormContext, 
    useWatch,
    Controller 
} from "react-hook-form";
import {
    formatFinalPhoneValue,
    getPhoneCodeBycountryCode
} from "@/components/theme/ui/PhoneNumberInput/phoneCodeMetaData";
import { GET_COUNTRY_STATES } from "@/graphql";
import { EMAIL_REGEX, IS_VALID_INPUT, IS_VALID_FULL_PHONE, IS_VALID_PHONECODE } from "@utils/constants";
import type { CustomerAddressItem } from "@/types/customer/type";
import { useCountries } from "@utils/hooks/useConfig";
import InputText from "@/components/theme/ui/InputText";
import Select from "@/components/theme/ui/Select";
import PhoneNumberInput from "@/components/theme/ui/PhoneNumberInput/PhoneNumberInput";
import { LoadingSpinner } from "@components/common/LoadingSpinner";
import {LyDropDown} from "@/components/theme/ui/LyDropDown";



export default function ShippingAddressCheckout({
    noAddress,
    isGuest,
    showFormField,
    onShowFormFieldChange,
    customerAddressList,
    onEmailChange
}: {
    noAddress: boolean;
    isGuest: boolean;
    showFormField: boolean;
    onShowFormFieldChange: (e: boolean) => void;
    customerAddressList: CustomerAddressItem[];
    onEmailChange: (value: string) => void;
}) {

    const countries = useCountries();
    const { 
        getValues,
        setValue,
        register,
        formState: { errors },
        control,
    } = useFormContext() // retrieve all hook methods
    
    
    const countriesOptions = useMemo(() => {
        return countries.map((country) => ({
            value: country.code,
            label: country.name,
            id: String(country._id),
        }))
    },[countries]);

    const [ 
        selectedCountryCode,
        firstName,
        lastName,
        streetAddress,
        stateProvince,
        postCode,
        city,
        phoneNumber
    ] = useWatch({
        control,
        name: [
            'shippingCountry',
            'shippingFirstName',
            'shippingLastName',
            'shippingAddress',
            'shippingState',
            'shippingPostcode',
            'shippingCity',
            'shippingPhoneNumber'
        ]
    });
    const selectedCountry = useMemo(() => {
        return countries.find( (country) => country.code === selectedCountryCode)
    }, [countries, selectedCountryCode]);

    const { data: statesData, loading: statesLoading } = useQuery(GET_COUNTRY_STATES, {
        variables: {
            countryId: selectedCountry?._id
        },

        skip: !selectedCountryCode,
    });

    let statesOptions: { value: string; label: string, id: string }[] = [];
    if(statesData) {
        statesOptions = statesData.countryStates.map((state) => ({
            value: state.code,
            label: state.defaultName,
            id: String(state._id),
        }));
    }

    const [showDropDown, setShowDropDown] = useState(false);

    // 是否用户手动选择过区号
    const [hasUserSelectedPhoneCode, setHasUserSelectedPhoneCode] = useState(false);


    // 国家变更后 state字段的值需要清空
    // 选择国家时同步电话区号
    useEffect(() => {
        const preShippingPhoneNum = getValues('shippingPhoneNumber');
        const regPhoneCode = IS_VALID_PHONECODE;
    
        if(preShippingPhoneNum && !hasUserSelectedPhoneCode) {
            const newPhoneCode = getPhoneCodeBycountryCode(selectedCountryCode);
            const codePart = regPhoneCode.exec(preShippingPhoneNum);
            let phone = preShippingPhoneNum;
            if(codePart) {
                phone = preShippingPhoneNum.replace(codePart[0], '');
            }
            if(codePart && newPhoneCode !== codePart[0].trim()) {
                return;
            }
            setValue('shippingPhoneNumber',formatFinalPhoneValue(newPhoneCode, phone))
        }
        
    },[selectedCountryCode,hasUserSelectedPhoneCode,getValues,setValue]);

    const changeAddress = () => {
        if(isGuest) {
            if(!showFormField) onShowFormFieldChange(true);
        } else {
            showMyAddressList();
        }
    };

    const showMyAddressList = () => {
        setShowDropDown(true);
    };
    const closeMyaddressList = useCallback(() => {
        setShowDropDown(false);
    },[]);
    // 从地址列表选择地址
    const selectAddress = (param: CustomerAddressItem | 'edit') => {
        if(param === 'edit') {
            if(!showFormField) onShowFormFieldChange(true);
        } else {
            setValue('shippingFirstName',param.firstName);
            setValue('shippingLastName',param.lastName);
            setValue('shippingAddress',param.address);
            setValue('shippingCountry',param.country);
            setValue('shippingState',param.state);
            setValue('shippingPostcode',param.postcode);
            setValue('shippingCity',param.city);
            setValue('shippingPhoneNumber',param.phone);
        }
        closeMyaddressList();
    };

    /**
     * 游客：
     * 1. 购物车没地址 -- 进来显示填写新地址，地址表单；填完地址，保存，关闭弹窗，购物车地址更新；再次进来显示填写的地址，隐藏表单；如果想修改，就点击修改，显示地址表单；
     * 2. 购物车有地址 -- 进来显示已有的地址，隐藏表单；如果想修改，就点击修改，显示地址表单；
     * 
     * 登录用户：
     * 1. 购物车没地址 -- 进来显示填写新地址，地址表单；
     *    如果想选已有地址，点击箭头，弹出地址列表，选择地址，选完地址更新到表单，关闭地址列表（打上选中状态）；如果地址列表没数据，显示没有地址供选择；
     *    如果不想选地址，就填写地址表单。
     *    保存地址，关闭弹窗；
     *    再次进来，显示购物车中的地址；
     * 
     * 2. 购物车有地址 -- 进来显示购物车中的地址；
     *    如果想修改地址，点击箭头，出现地址列表
     *    
     * 地址列表数据直接在 父组件获取
     * 
     * 
     * 表单显示逻辑：
     * 游客      -- noAddress 为true 或者 change 时显示
     * 登录用户  -- noAddress 为true 或者 change 时显示
     */
    return (<>
        <h3 className="text-ly-20 font-medium mb-4">Shipping Address</h3>
        <div className="w-full">
            {noAddress ? 
                <div className="relative box-border w-full h-14 flex items-center px-4 bg-[url(/image/address-bg.webp)] bg-position-[0_-70%] bg-size-[100%_auto]">
                    <svg className="flex-none w-6 h-6 mr-3" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 21.9999C12 21.9999 19.5 15.9999 19.5 9.49988C19.5 5.35773 16.1422 1.99988 12 1.99988C7.85785 1.99988 4.5 5.35773 4.5 9.49988C4.5 15.9999 12 21.9999 12 21.9999Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path><path d="M12 12.4999C13.6568 12.4999 15 11.1567 15 9.49988C15 7.84303 13.6568 6.49988 12 6.49988C10.3432 6.49988 9 7.84303 9 9.49988C9 11.1567 10.3432 12.4999 12 12.4999Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path></svg>
                    <span className="text-ly-14">+New Shipping Address</span>
                    {!isGuest && 
                        <button onClick={changeAddress} className="absolute top-1/2 right-4 -translate-y-1/2" title="change address" type="button">
                            <svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="16" y="0" width="16" height="16" transform="rotate(90 16 0)"   fill="#FFFFFF" fillOpacity="0"></rect><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M11.7295 6.32028L7.62964 10.4201L3.52978 6.32028"></path></svg>
                        </button>
                    }
                </div>
            : 
                <div className="w-full box-border px-4 bg-[url(/image/address-bg.webp)] bg-position-[0_-84%] bg-size-[100%_auto]">
                    <div className="border-b-1 flex h-12.5 items-center justify-between">
                        <p className="text-ly-14 font-medium">
                            {firstName} {lastName}
                            <span className="border-r h-3.5 mx-4"></span> 
                            {phoneNumber}
                        </p>
                        <button onClick={changeAddress} className="flex-none flex items-center text-ly-14 mr-1.5" type="button">
                            Change
                            <svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none"><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round"  d="M6 9L12 15L18 9"></path></svg>
                        </button>
                    </div>
                    <div className="flex items-center h-14">
                        <svg className="w-6 h-6 mr-3" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 21.9999C12 21.9999 19.5 15.9999 19.5 9.49988C19.5 5.35773 16.1422 1.99988 12 1.99988C7.85785 1.99988 4.5 5.35773 4.5 9.49988C4.5 15.9999 12 21.9999 12 21.9999Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path><path d="M12 12.4999C13.6568 12.4999 15 11.1567 15 9.49988C15 7.84303 13.6568 6.49988 12 6.49988C10.3432 6.49988 9 7.84303 9 9.49988C9 11.1567 10.3432 12.4999 12 12.4999Z" stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round"  ></path></svg>
                        <span className="text-ly-14 leading-ly-20">
                            {streetAddress}, 
                            {city}, 
                            {stateProvince}, 
                            {postCode}, 
                            {selectedCountryCode}
                        </span>
                    </div>
                </div>  
            }
            <LyDropDown
                showDropDown={showDropDown}
                onClose={closeMyaddressList}
            >
                <div className={clsx("w-full p-3 text-ly-13 font-medium", noAddress && 'hidden')} key={'edit'} onClick={() => {selectAddress('edit')}}>
                    Edit Address
                </div>
                {customerAddressList.map((item) => {
                    return (
                        <div className="w-full p-3" key={item.id} onClick={() => selectAddress(item)}>
                    
                            <p className="text-ly-13 leading-4">
                                {item.firstName} {item.lastName}, 
                                {item.address}, 
                                {item.city}, 
                                {item.state}, 
                                {item.postcode}, 
                                {item.country},
                                {item.phone}
                            </p>
                        </div>
                    );
                })}
                
            </LyDropDown>
            
        </div>     
            

        {/**
         * 登录用户： noAddres=false and showFormField = false 时 隐藏；  noAddres=true 显示
         * 游客： noAddres=false and showFormField = false 时 隐藏； noAddres=true 显示
         */}
        <div className={clsx("box-border w-full mt-4", {
            "hidden": !showFormField && !noAddress
        })}>

            <div className="w-full mt-4">
                <label className="text-ly-16 block mb-1 font-semibold">
                    Name *
                </label>
                <div className="w-full flex justify-between gap-3">
                    <div className="flex-auto">
                        <InputText
                            type="text"
                            placeholder="First name"
                            {...register("shippingFirstName", {
                                required: "First name is required",
                                pattern: {
                                    value: IS_VALID_INPUT,
                                    message: "Invalid First Name",
                                }
                            })}
                            error={errors.shippingFirstName && errors.shippingFirstName.message as string}
                        />
                    </div> 
                    <div className="flex-auto">
                        <InputText
                            type="text"
                            placeholder="Last name"
                            {...register("shippingLastName", {
                                required: "Last name is required",
                                pattern: {
                                    value: IS_VALID_INPUT,
                                    message: "Invalid Last Name",
                                }
                            })}
                            error={errors.shippingLastName && errors.shippingLastName.message as string}
                        />
                    </div>
                </div>
            </div>

            <div className={clsx("w-full mt-4",{
                "hidden": !isGuest
            })}>
                <label className="text-ly-16 block mb-1 font-semibold">
                    Email *
                </label>
                <InputText
                    type="email"
                    placeholder="Enter your email address"
                    {...register("shippingEmail", {
                        required: "Email is required",
                        pattern: {
                            value: EMAIL_REGEX,
                            message: "Please enter a valid email address",
                        },
                        onChange: (e) => {
                            onEmailChange(e.target.value);
                            // console.log(e.target.value);
                            // if(isGuest) {
                            //     verifyEmailIsRegistered(e.target.value);
                            // }
                        }
                    })}
                    error={errors.shippingEmail && errors.shippingEmail.message as string}
                />
            </div>
            

            <div className="w-full mt-4">
                <label className="text-ly-16 block mb-1 font-semibold">Address *</label>
                <InputText
                    type="text"
                    placeholder="Please Input Your Detailed Address With Apt. No"
                    {...register("shippingAddress", {
                        required: "Address is required",
                    })}
                    error={errors.shippingAddress && errors.shippingAddress.message as string}
                />
                
            </div>

            <div className="w-full mt-4">
                <label className="text-ly-16 block mb-1 font-semibold">Country and State/Province  *</label>
                <div className="w-full">
                    <div className="w-full flex justify-between gap-3">
                        <div className="flex-auto w-1/2">
                            <Select placeholder="Country/Region"
                                {...register("shippingCountry", {
                                    required: "Country/Region field is required",
                                    onChange: () => {
                                        // 清空 state/city
                                        setValue('shippingState','',{
                                            shouldDirty: true,
                                            shouldValidate: true,
                                        });
                                        setValue('shippingCity','',{
                                            shouldDirty: true,
                                            shouldValidate: true,
                                        });
                                    }
                                })}
                                options={countriesOptions}
                                error={errors.shippingCountry && errors.shippingCountry.message as string}
                            /> 
                        </div>
                        <div className="flex-auto relative w-1/2">
                            {statesLoading && <LoadingSpinner className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />}
                            {statesOptions.length > 0 ?
                            (
                                <Select placeholder="State/Province"
                                    {...register("shippingState", {
                                        required: "State/Province field is required"
                                    })}
                                    options={statesOptions}
                                    error={errors.shippingState && errors.shippingState.message as string}
                                />
                            )
                            : (
                                <InputText
                                    type="text"
                                    placeholder="State/Province"
                                    {...register("shippingState", {
                                        required: "State/Province field is required"
                                    })}
                                    error={errors.shippingState && errors.shippingState.message as string}
                                />
                            )}
                            
                        </div>
                        
                    </div>
                    <div className="w-full flex justify-between mt-4 gap-3">
                        <div className="flex-auto">
                            <InputText
                                type="text"
                                placeholder="Zip/Postal Code"
                                {...register("shippingPostcode", {
                                    required: "Postcode field is required",
                                    pattern: {
                                        value: IS_VALID_INPUT,
                                        message: "Invalid Postcode",
                                    },
                                })}
                                error={errors.shippingPostcode&& errors.shippingPostcode.message as string}
                            />
                        </div>
                        <div className="flex-auto">
                            <InputText
                                type="text"
                                placeholder="City"
                                {...register("shippingCity", {
                                    required: "City field is required",
                                    pattern: {
                                        value: IS_VALID_INPUT,
                                        message: "Invalid City",
                                    },
                                })}
                                error={errors.shippingCity && errors.shippingCity.message as string}
                            />
                        </div>
                    </div>
                    
                </div>
            </div>

            <div className="w-full mt-4"> 
                <label className="text-ly-16 block mb-1 font-semibold">Phone number *</label>
                 <Controller
                    name="shippingPhoneNumber"
                    control={control}
                    rules={{
                        required: "Phone Number is required",
                        pattern: {
                            value: IS_VALID_FULL_PHONE,
                            message: "Invalid Phone Number",
                        }
                    }}
                    render={({ field, fieldState }) => {
                        return (
                            <PhoneNumberInput 
                                placeholder="Please Input Your Phone Number"
                                value={field.value}
                                onChange={field.onChange}
                                onBlur={field.onBlur}
                                name={field.name}
                                ref={field.ref}
                                error={fieldState.error?.message}
                                countryCode={selectedCountryCode}
                                hasUserSelectedPhoneCode={hasUserSelectedPhoneCode}
                                onHasUserSelectedPhoneCode={() => setHasUserSelectedPhoneCode(true)}
                            />
                        );
                    }}
                />

                
            </div>

        </div>
    </>);
};