import React from 'react';
import { flatMap, isArray, isEmpty, isPlainObject, isString, map, toPairs } from 'lodash';

import cn from '@/utils/class-names';

interface ValidationErrorMessageProps {
    errorMessages: string | Record<string, any>[] | Record<string, any> | string[] | unknown;
    className?: string;
}

const ValidationErrorMessage: React.FC<ValidationErrorMessageProps> = ({ errorMessages = '', className }) => {
    const isStringErrorMessage = isString(errorMessages) && !isEmpty(errorMessages.trim());
    const isArrayErrorMessage = isArray(errorMessages) && !isEmpty(errorMessages);
    const isErrorObject = isPlainObject(errorMessages) && !isEmpty(errorMessages) && !isArrayErrorMessage;


    const renderErrorObject = (obj: Record<string, any>, prefix = ''): any[] => {
        return flatMap(toPairs(obj), ([key, value]) => {
            if (isString(value)) {
                return (
                    <div key={prefix + key}>
                        <span className={cn("my-2 text-red-500 text-[14px]", className)}>
                            <strong>{prefix}</strong> {value}
                        </span>
                        <br />
                    </div>
                );
            } else if (isPlainObject(value)) {
                return renderErrorObject(value, `${prefix}${key}.`);
            } else {
                return [];
            }
        });
    };

    const shouldRenderError = isStringErrorMessage || isArrayErrorMessage || isErrorObject;

    return (
        <>
            {shouldRenderError && (
                <div className={cn("bg-red-50 border border-red-400 text-red-700 px-2 py-1 my-1 rounded relative text-xs", className)}>
                    {isStringErrorMessage ? (
                        <div className={cn("my-2 text-red-500 text-[14px]", className)}>{errorMessages}</div>
                    ) : isArrayErrorMessage ? (
                        <div className='mb-4'>
                            {map(errorMessages as any[], (val: any, index: number) => (
                                <div key={index}>
                                    {isString(val) ? (
                                        <span className={cn("my-2 text-red-500 text-[14px]", className)}>{val}</span>
                                    ) : (
                                        renderErrorObject(val)
                                    )}
                                    <br />
                                </div>
                            ))}
                        </div>
                    ) : isErrorObject ? (
                        <div className='mb-4'>
                            {renderErrorObject(errorMessages as Record<string, any>)}
                        </div>
                    ) : null}
                </div>
            )}
        </>
    );
};

export default ValidationErrorMessage;


// import cn from '@/utils/class-names';
// import React from 'react';

// interface ValidationErrorMessageProps {
//   errorMessages: string | Record<string, string> | object | unknown;
//   className?: string;
// }

// const ValidationErrorMessage: React.FC<ValidationErrorMessageProps> = ({ errorMessages, className }) => {
//   // console.log('errorMessages', JSON.stringify(errorMessages));

//   return (
//     <>
//       {errorMessages && (
//         <div className={cn("my-2 text-red-500 text-[14px]", className)}>
//           {typeof errorMessages === 'string' ? (
//             <span>{errorMessages}</span>
//           ) : Array.isArray(errorMessages) ? (
//             errorMessages.map((message, index) => (
//               <div key={index}>
//                 <span>{message}</span>
//                 <br />
//               </div>
//             ))
//           ) : (
//             Object.values(errorMessages as Record<string, string>).map((val: string, index: number) => (
//               <div key={index}>
//                 <span>{val}</span>
//                 <br />
//               </div>
//             ))
//           )}
//         </div>
//       )}

//     </>
//   );
// };

// export default ValidationErrorMessage;