// app/v2Components/ErrorInfoNote/ErrorTypeRenderer.js
import React from 'react';
import PropTypes from 'prop-types';
import CapDivider from "@capillarytech/cap-ui-library/CapDivider";
import { getLiquidProps, hasPlatformErrors } from './utils';

/**
 * Renders error sections for either generic (non-platform) or platform-specific (Android/iOS) errors.
 * - If `genericErrors` is provided, renders standard and liquid errors (if present) without platform labels.
 * - If `androidErrors`/`iosErrors` are provided, renders merged errors for each platform with platform labels and dividers.
 */
const ErrorTypeRenderer = ({
  genericErrors,
  androidErrors,
  iosErrors,
  ErrorSectionComponent,
}) => {
  // Render generic (non-platform) errors
  if (genericErrors) {
    const hasStandard = genericErrors?.standard?.errorsToShow?.length > 0;
    const hasLiquid = genericErrors?.liquid?.errorsToShow?.length > 0;
    if (!hasStandard && !hasLiquid) return null;

    const liquidGenericProps = {
      title: genericErrors?.liquid?.title,
      errors: genericErrors?.liquid?.errorsToShow,
      platformLabel: null,
    };

    return (
      <div className="error-container">
        {hasStandard && (
          <ErrorSectionComponent
            title={genericErrors?.standard?.title}
            errors={genericErrors?.standard?.errorsToShow}
            liquidError={false}
            platformLabel={null}
          />
        )}
        {hasStandard && hasLiquid && <CapDivider className="liquid-divider" />}
        {hasLiquid && (
          <ErrorSectionComponent
            {...liquidGenericProps}
            liquidError
          />
        )}
      </div>
    );
  }

  // Render platform-specific errors (Android/iOS)
  const hasAndroid = hasPlatformErrors(androidErrors);
  const hasIos = hasPlatformErrors(iosErrors);

  if (!hasAndroid && !hasIos) return null;
  
  const showPlatformLabels = !!androidErrors?.LIQUID?.platformLabel || !!iosErrors?.LIQUID?.platformLabel;
  const showTitle = hasAndroid && hasIos;
  const liquidAndroidProps = getLiquidProps(androidErrors, true, showTitle, showPlatformLabels);
  const liquidIosProps = getLiquidProps(iosErrors, false, showTitle, showPlatformLabels);

  return (
    <div className="error-container">
      {hasAndroid && (
        <ErrorSectionComponent
          {...liquidAndroidProps}
        />
      )}
      {hasAndroid && hasIos && showPlatformLabels && (
        <CapDivider className="platform-divider" />
      )}
      {hasIos && (
        <ErrorSectionComponent
          {...liquidIosProps}
        />
      )}
    </div>
  );
};

ErrorTypeRenderer.propTypes = {
  genericErrors: PropTypes.shape({
    standard: PropTypes.shape({
      errorsToShow: PropTypes.array.isRequired,
      title: PropTypes.node.isRequired,
    }),
    liquid: PropTypes.shape({
      errorsToShow: PropTypes.array.isRequired,
      title: PropTypes.node.isRequired,
    }),
  }),
  androidErrors: PropTypes.shape({
    standard: PropTypes.shape({
      errorsToShow: PropTypes.array.isRequired,
      title: PropTypes.node.isRequired,
      platformLabel: PropTypes.string,
    }),
    liquid: PropTypes.shape({
      errorsToShow: PropTypes.array.isRequired,
      title: PropTypes.node.isRequired,
      platformLabel: PropTypes.string,
    }),
  }),
  iosErrors: PropTypes.shape({
    standard: PropTypes.shape({
      errorsToShow: PropTypes.array.isRequired,
      title: PropTypes.node.isRequired,
      platformLabel: PropTypes.string,
    }),
    liquid: PropTypes.shape({
      errorsToShow: PropTypes.array.isRequired,
      title: PropTypes.node.isRequired,
      platformLabel: PropTypes.string,
    }),
  }),
  ErrorSectionComponent: PropTypes.elementType.isRequired,
};

ErrorTypeRenderer.defaultProps = {
  genericErrors: null,
  androidErrors: null,
  iosErrors: null,
};

export default ErrorTypeRenderer;
