import { h, $ } from 'sigpro.js';
import { ui, cls, get } from './_core.js';

export const InputBase = ({
  loading = false,
  ui: uiOptions = '',
  class: className = '',
  type = 'text',
  value,
  onInput,
  ...inputProps
}) => {
  const isPassword = type === 'password';
  const showPassword = $(false);
  
  const inputClasses = cls(
    ui('input', uiOptions),
    className,
    isPassword && 'pr-10',
    loading && 'loading loading-spinner loading-xs absolute right-2 top-1/2 -translate-y-1/2'
  );

  let inputEl = h('input', {
    class: inputClasses + (isPassword ? ' pr-10' : ''),
    type: isPassword ? 'text' : 'password',
    value,
    oninput: onInput,
    ...inputProps
  });

  if (isPassword) {
    const toggle = h('label', {
      class: 'swap swap-rotate absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer'
    }, [
      h('input', {
        type: 'checkbox',
        checked: showPassword(),
        onchange: (e) => showPassword(e.target.checked)
      }),
      h('span', { class: 'swap-on icon-[lucide--eye]' }),
      h('span', { class: 'swap-off icon-[lucide--eye-off]' })
    ]);
    inputEl = h('div', { class: 'relative w-full' }, [inputEl, toggle]);
  }

  if (icon) {
    const isIconClass = icon.includes('-') || icon.includes('icon-');
    const iconElement = isIconClass
      ? h('span', { class: icon })
      : h('span', { class: 'opacity-50' }, icon);
    content = h('label', { class: ui('input', uiOptions).replace('input-', '') }, [
      iconElement,
      h('span', { class: 'opacity-70' })
    ]);
  }

  return inputEl;
};