import { Icon } from '../../Atoms/Icon/Icon';
import { FONT_FAMILY_SANS } from '../../../designTokens';
import { TABLA_SEARCH_INLINE_STYLES } from './tablaSearchStyles';

/**
 * Buscador de `Tabla` (magnifying glass + input). Reutilizable en otros layouts (ej. VistaDatos).
 */
export const TablaSearch = ({
  searchValue,
  onSearchChange,
  searchPlaceholder = "Buscar por nombre o legajo",
  maxWidth = '498px',
  width,
  className = '',
  wrapStyle,
  boxStyle,
  inputClassName = 'anima-tabla__search-input',
  inputStyle,
  trailing,
  ...props
}) => {
  const resolvedWidth =
    boxStyle?.width ?? (width != null ? (typeof width === 'number' ? width : width) : undefined);
  const hasFixedWidth = resolvedWidth != null && resolvedWidth !== '';

  return (
  <>
    <style>{TABLA_SEARCH_INLINE_STYLES}</style>
    <div
      className={`anima-tabla__search-wrap ${className}`.trim()}
      style={{
        flexShrink: 0,
        width: '100%',
        maxWidth: '100%',
        boxSizing: 'border-box',
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        ...(wrapStyle || {}),
      }}
      {...props}
    >
      <div
        style={{
          flex: hasFixedWidth ? '0 0 auto' : '1 1 auto',
          minWidth: 0,
          maxWidth: hasFixedWidth ? resolvedWidth : maxWidth,
          width: hasFixedWidth
            ? typeof resolvedWidth === 'number'
              ? `${resolvedWidth}px`
              : resolvedWidth
            : maxWidth === '100%'
              ? '100%'
              : undefined,
          height: '40px',
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          paddingLeft: '12px',
          paddingRight: '12px',
          boxSizing: 'border-box',
          border: '1px solid var(--color-grey-600, #5F5F5F)',
          borderRadius: '8px',
          backgroundColor: 'var(--color-neutrals-white, #FFFFFF)',
          ...(boxStyle || {}),
        }}
      >
        <Icon
          name="MagnifyingGlassCircleIcon"
          size={24}
          style={{ flexShrink: 0, color: 'var(--color-grey-500, #777777)' }}
        />
        <input
          type="search"
          placeholder={searchPlaceholder}
          value={searchValue ?? undefined}
          onChange={onSearchChange ? (e) => onSearchChange(e.target.value, e) : undefined}
          className={inputClassName}
          style={{
            flex: 1,
            minWidth: 0,
            height: '100%',
            border: 'none',
            outline: 'none',
            background: 'var(--color-neutrals-white, #FFFFFF)',
            fontFamily: FONT_FAMILY_SANS,
            fontSize: '16px',
            lineHeight: '24px',
            boxSizing: 'border-box',
            ...(inputStyle || {}),
          }}
        />
      </div>
      {trailing}
    </div>
  </>
  );
};

export default TablaSearch;
