/**
 * ValidationErrorDisplay - HTML Editor validation display
 *
 * Displays validation errors and warnings in two tabs (Errors, Warnings).
 * Panel can be collapsed to a sticky footer bar; it does not disappear.
 */

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { hasValidationErrors } from '../../utils/validationAdapter';
import ValidationTabs from '../ValidationTabs';

// Styles
import './_validationErrorDisplay.scss';

/**
 * ValidationErrorDisplay Component
 *
 * Displays validation issues in Errors and Warnings tabs; collapse toggles visibility but panel stays in footer.
 */
const ValidationErrorDisplay = ({
  validation,
  onErrorClick,
  className = '',
}) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  const handleToggleCollapse = () => {
    setIsCollapsed((prev) => !prev);
  };

  // Expand panel when user clicks redirection (so panel does not stay stuck to footer)
  const handleExpand = () => {
    setIsCollapsed(false);
  };

  if (!hasValidationErrors(validation)) {
    return null;
  }

  return (
    <div
      className={`validation-error-display ${isCollapsed ? 'validation-error-display--collapsed' : ''} ${className}`}
      role="alert"
      aria-live="polite"
      aria-label="Validation errors"
    >
      <ValidationTabs
        validation={validation}
        onErrorClick={onErrorClick}
        isCollapsed={isCollapsed}
        onToggleCollapse={handleToggleCollapse}
        onExpand={handleExpand}
      />
    </div>
  );
};

ValidationErrorDisplay.propTypes = {
  validation: PropTypes.shape({
    isValidating: PropTypes.bool,
    getAllIssues: PropTypes.func,
  }),
  onErrorClick: PropTypes.func,
  className: PropTypes.string,
};

ValidationErrorDisplay.defaultProps = {
  validation: null,
  onErrorClick: null,
  className: '',
};

export default ValidationErrorDisplay;
