import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-select-wrap{position:relative;display:flex;align-items:center;}
.nbl-select-wrap .nbl-control{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;}
.nbl-select-chevron{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);display:flex;align-items:center;}
`;

inject('nbl-select-css', css);

export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
  hint?: string;
  error?: string;
  required?: boolean;
}

export function Select({
  label,
  hint,
  error,
  required,
  className = '',
  id,
  children,
  ...rest
}: SelectProps) {
  inject('nbl-select-css', css);
  const selectId = id ?? (label ? `nbl-select-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
  const controlCls = ['nbl-control', error ? 'nbl-control--error' : '', className].filter(Boolean).join(' ');

  return (
    <div className="nbl-field">
      {label && (
        <label className={`nbl-label${required ? ' nbl-label--required' : ''}`} htmlFor={selectId}>
          {label}
        </label>
      )}
      <div className="nbl-select-wrap">
        <select id={selectId} className={controlCls} required={required} {...rest}>
          {children}
        </select>
        <span className="nbl-select-chevron">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </div>
      {(error || hint) && (
        <span className={`nbl-hint${error ? ' nbl-hint--error' : ''}`}>{error ?? hint}</span>
      )}
    </div>
  );
}