/**
 * BPSFW Custom UI Component Library
 * Zero @wordpress/components dependency.
 */
import React, { useState } from 'react';

export const Card = ({ children, className = '' }) => (
  <div className={['bui-card', className].filter(Boolean).join(' ')}>{children}</div>
);
export const CardBody = ({ children, className = '' }) => (
  <div className={['bui-card-body', className].filter(Boolean).join(' ')}>{children}</div>
);

export const Button = ({ children, onClick, variant, isPrimary, href, target, disabled = false, size, className = '' }) => {
  const v = isPrimary ? 'primary' : (variant || 'secondary');
  const cls = ['bui-btn', `bui-btn--${v}`, size ? `bui-btn--${size}` : '', className].filter(Boolean).join(' ');
  if (href) return <a href={href} target={target} className={cls}>{children}</a>;
  return <button onClick={onClick} disabled={disabled} className={cls}>{children}</button>;
};

export const Heading = ({ level = 2, children, className = '' }) => {
  const Tag = `h${level}`;
  return <Tag className={['bui-heading', `bui-heading--h${level}`, className].filter(Boolean).join(' ')}>{children}</Tag>;
};

export const Spacer = ({ margin = 2 }) => (
  <div style={{ height: `${margin * 8}px` }} aria-hidden="true" />
);

export const Flex = ({ children, justify = 'space-between', align = 'center', wrap = false, col = false, className = '' }) => (
  <div
    className={['bui-flex', wrap ? 'bui-flex--wrap' : '', col ? 'bui-flex--col' : '', className].filter(Boolean).join(' ')}
    style={{ justifyContent: justify, alignItems: align }}
  >{children}</div>
);

export const FlexItem = ({ children, grow = false, shrink0 = false, className = '' }) => (
  <div className={[
    'bui-flex-item',
    grow    ? 'bui-flex-item--grow'    : '',
    shrink0 ? 'bui-flex-item--shrink-0': '',
    className,
  ].filter(Boolean).join(' ')}>{children}</div>
);

export const TextControl = ({ label, value = '', onChange, type = 'text', placeholder = '', className = '' }) => (
  <div className={['bui-text-control', className].filter(Boolean).join(' ')}>
    {label && <label className="bui-field-label">{label}</label>}
    <input className="bui-input-base" type={type} value={value ?? ''} placeholder={placeholder}
      onChange={e => onChange(e.target.value)} />
  </div>
);

export const TextareaControl = ({ label, value = '', onChange, placeholder = '', className = '' }) => (
  <div className={['bui-textarea-control', className].filter(Boolean).join(' ')}>
    {label && <label className="bui-field-label">{label}</label>}
    <textarea className="bui-textarea" value={value ?? ''} placeholder={placeholder}
      onChange={e => onChange(e.target.value)} />
  </div>
);

let _id = 0;
export const CheckboxControl = ({ label, checked = false, onChange, className = '' }) => {
  const id = `bui-chk-${++_id}`;
  return (
    <label className={['bui-checkbox-control', className].filter(Boolean).join(' ')} htmlFor={id}>
      <input id={id} className="bui-checkbox-input" type="checkbox"
        checked={checked} onChange={e => onChange(e.target.checked)} />
      {label && <span className="bui-checkbox-label">{label}</span>}
    </label>
  );
};

export const SelectControl = ({ label, value, options = [], onChange, compact = false, className = '' }) => (
  <div className={['bui-select-control', compact ? 'bui-select-control--compact' : '', className].filter(Boolean).join(' ')}>
    {label && <label className="bui-field-label">{label}</label>}
    <select className="bui-select" value={value} onChange={e => onChange(e.target.value)}>
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  </div>
);

export const TabPanel = ({ tabs = [], children, className = '', activeClass = 'is-active' }) => {
  const [active, setActive] = useState(tabs[0]?.name ?? '');
  const activeTab = tabs.find(t => t.name === active) ?? tabs[0];

  return (
    <div className={['bpsfw-tab-panel', className].filter(Boolean).join(' ')}>
      <div className="bpsfw-tab-panel__nav" role="tablist">
        {tabs.map(tab => (
          <button
            key={tab.name}
            role="tab"
            aria-selected={tab.name === active}
            className={[
              'bpsfw-tab-panel__btn',
              tab.name === active ? activeClass : '',
              tab.className || '',
            ].filter(Boolean).join(' ')}
            onClick={() => setActive(tab.name)}
          >
            {tab.title}
          </button>
        ))}
      </div>
      <div className="bpsfw-tab-panel__content" role="tabpanel">
        {activeTab && children(activeTab)}
      </div>
    </div>
  );
};