import { Icon } from '../../Atoms/Icon/Icon';
import {
  DOCUMENTO_ESTADO_ICON_ERROR_STYLE,
  DOCUMENTO_ESTADO_ICON_SUCCESS_STYLE,
} from './documentoEstadoIconStyles';
import {
  VISTA_DATOS_DOCUMENTO_ITEM_BORDER_STYLE,
  VISTA_DATOS_DOCUMENTO_ORIGEN_STYLE,
  VISTA_DATOS_DOCUMENTO_PERSONA_STYLE,
  VISTA_DATOS_DOCUMENTO_STATUS_ERROR_STYLE,
  VISTA_DATOS_DOCUMENTO_STATUS_STYLE,
  VISTA_DATOS_DOCUMENTO_TITLE_STYLE,
} from './vistaDatosDocumentosStyles';

/**
 * @param {'success'|'error'} [status]
 */
export const VistaDatosDocumentoItem = ({
  status = 'success',
  title,
  archivoOrigen,
  archivoOrigenPrefix = 'Archivo origen:',
  personaLine,
  statusLabel,
  showBorder = true,
  isFirst = false,
  className = '',
  style,
  onClick,
  ...props
}) => {
  const isError = status === 'error';
  const iconName = isError ? 'XCircleIcon' : 'CheckCircleIcon';
  const iconStyle = isError ? DOCUMENTO_ESTADO_ICON_ERROR_STYLE : DOCUMENTO_ESTADO_ICON_SUCCESS_STYLE;

  const content = (
    <>
      <Icon
        name={iconName}
        variant="24-outline"
        size={24}
        style={{ ...iconStyle, marginTop: 2 }}
        aria-hidden
      />
      <div style={{ flex: 1, minWidth: 0 }}>
        {title ? (
          <p className="anima-vista-datos-documento__title" style={VISTA_DATOS_DOCUMENTO_TITLE_STYLE}>
            {title}
          </p>
        ) : null}
        {archivoOrigen ? (
          <p className="anima-vista-datos-documento__origen" style={VISTA_DATOS_DOCUMENTO_ORIGEN_STYLE}>
            {archivoOrigenPrefix} {archivoOrigen}
          </p>
        ) : null}
        {personaLine ? (
          <p className="anima-vista-datos-documento__persona" style={VISTA_DATOS_DOCUMENTO_PERSONA_STYLE}>
            {personaLine}
          </p>
        ) : null}
        {statusLabel ? (
          <p
            className="anima-vista-datos-documento__status"
            style={isError ? VISTA_DATOS_DOCUMENTO_STATUS_ERROR_STYLE : VISTA_DATOS_DOCUMENTO_STATUS_STYLE}
          >
            {statusLabel}
          </p>
        ) : null}
      </div>
    </>
  );

  const rowStyle = {
    display: 'flex',
    alignItems: 'flex-start',
    gap: 12,
    width: '100%',
    padding: isFirst ? '8px 0 14px 0' : '12px 0 12px 0',
    boxSizing: 'border-box',
    ...(showBorder ? VISTA_DATOS_DOCUMENTO_ITEM_BORDER_STYLE : {}),
    ...(style || {}),
  };

  if (typeof onClick === 'function') {
    return (
      <button
        type="button"
        className={['anima-vista-datos-documento-item', className].filter(Boolean).join(' ')}
        style={{
          ...rowStyle,
          border: 'none',
          borderBottom: showBorder ? VISTA_DATOS_DOCUMENTO_ITEM_BORDER_STYLE.borderBottom : undefined,
          background: 'transparent',
          cursor: 'pointer',
          textAlign: 'left',
        }}
        onClick={onClick}
        {...props}
      >
        {content}
      </button>
    );
  }

  return (
    <div
      className={['anima-vista-datos-documento-item', className].filter(Boolean).join(' ')}
      style={rowStyle}
      {...props}
    >
      {content}
    </div>
  );
};

export default VistaDatosDocumentoItem;
