import React, { useState } from 'react';
import './SwitchGroup.css';

export default function SwitchGroup({ options = [], value = [], title = '', selectAll = false, onChange }) {
  const allOn = options.length > 0 && options.every(o => value.indexOf(o.value) >= 0);

  function toggle(v) {
    const arr = value.slice();
    const idx = arr.indexOf(v);
    if (idx >= 0) arr.splice(idx, 1); else arr.push(v);
    onChange && onChange(arr);
  }
  function toggleAll() {
    onChange && onChange(allOn ? [] : options.map(o => o.value));
  }

  return (
    <div className="aa-switchgroup">
      {(title || selectAll) ? (
        <div className="aa-switchgroup-head">
          <span className="aa-switchgroup-title">{title}</span>
          {selectAll ? (
            <div className={'aa-switch' + (allOn ? ' is-on' : '')} onClick={toggleAll} />
          ) : null}
        </div>
      ) : null}
      {options.map((o, i) => (
        <div className="aa-switch-row" key={i}>
          <div className="aa-switch-text">
            <span className="aa-switch-label">{o.label}</span>
            {o.desc ? <span className="aa-switch-desc">{o.desc}</span> : null}
          </div>
          <div
            className={'aa-switch' + (value.indexOf(o.value) >= 0 ? ' is-on' : '')}
            onClick={() => toggle(o.value)}
          />
        </div>
      ))}
    </div>
  );
}