import React from 'react';

export interface ButtonGroupProps {
  /**
   * A function that will run after the input  has changed, it will return the value of the input for you to use in the parent component.
   */
  callback: any;
  /**
   * If true, will show an (optional) tag next to the title. If false or not supplied, nothing will show.
   */
  optional: boolean;
  /**
   * Id for the radios
   */
  id: string;
  /**
   * An array of items to display on each button => [title, value, active, showRadio]
   */
  options: {
    title: any;
    value: string;
    active: boolean;
    showRadio: boolean;
    sr?: string;
  }[];
  /**
   * If true, will show an * next to the title. If false or not supplied, nothing will show.
   */
  required: boolean;
  /**
   * Classes to be added to the wrapping label.
   */
  theme: string;
  /**
   * The label text title of the input.
   */
  title: string;
  ariaExpanded?: boolean;
  ariaControls?: string;
}

const ButtonGroup = ({
  callback,
  id = 'bg-radio',
  optional = false,
  options,
  required = false,
  theme = 'w-full h-auto',
  title,
  ariaControls,
  ariaExpanded = false,
}: ButtonGroupProps) => {
  return (
    <section
      data-test="component-buttonGroup"
      className="slmr--button-group-title w-full flex flex-wrap"
    >
      {title && <span>{title}</span>}
      {(required === true || optional === true) && (
        <span>
          {required === true && (
            <sup
              data-c="slmr--LabelOptional"
              className={`text-_-secondary-800 font-bold`}
            >
              {'*'}
            </sup>
          )}
          {optional === true && (
            <span className="text-xs text-_-neutrals-400 float-right relative top-[4px] ml-1">
              {'(optional)'}
            </span>
          )}
        </span>
      )}
      {options.map((option, index) => {
        if (!option.title) return false;

        return (
          <label
            aria-controls={ariaControls}
            aria-expanded={ariaExpanded}
            key={index}
            htmlFor={`${id}-${index}`}
            role="button"
            className={`slmr--button-group ${theme} text-xs text-dark bg-slate-50 p-2 text-right inline-block ml-0 leading-4 relative focus-within:border focus-within:border-dashed focus-within:border-black ${theme} ${
              option.active ? 'active' : ''
            }`}
          >
            <input
              className="sr-only"
              type="radio"
              id={`${id}-${index}`}
              name={`slmr--button-group-${id}`}
              defaultValue={option.sr || option.title}
              onChange={() => callback(index)}
            />{' '}
            {option.title}
          </label>
        );
      })}
    </section>
  );
};

export default ButtonGroup;