import { css } from 'glamor';
import { observer } from 'mobx-react';
import { useApphouse } from '../../../context/useApphouse';
import {
  ButtonOptionToggleStyle,
  SliderToggleStyles,
  useButtonToggleStyles,
  useSliderToggleStyles
} from './SliderToggle.styles';

interface SliderOption {
  label: string;
  id: string;
  action: () => void;
}

interface SliderToggleProps {
  styleOverwrites?: SliderToggleStyles;
  options: SliderOption[];
  value?: string;
}

export const SliderToggle: React.FC<SliderToggleProps> = observer(
  ({ styleOverwrites, options, value }) => {
    const { theme } = useApphouse();
    const styles = useSliderToggleStyles({
      theme: theme,
      overwrites: styleOverwrites
    });
    return (
      <div {...css(styles.container)} data-style="SliderToggle.container">
        <div
          data-style="SliderToggle.colorSchemeToggle"
          {...css(styles.colorSchemeToggle)}
          tabIndex={0}
          aria-label="Select a color scheme preference"
        >
          {options.map((option) => {
            return (
              <ButtonOptionToggle
                key={option.id}
                selected={value === option.id}
                option={option}
                styleOverwrites={styles.buttonOptionToggle}
              />
            );
          })}
        </div>
      </div>
    );
  }
);

interface ButtonOptionToggleProps {
  option: SliderOption;
  styleOverwrites?: ButtonOptionToggleStyle;
  selected: boolean;
}
const ButtonOptionToggle: React.FC<ButtonOptionToggleProps> = observer(
  ({ option, styleOverwrites, selected }) => {
    const { theme } = useApphouse();
    const styles = useButtonToggleStyles({
      theme: theme,
      overwrites: styleOverwrites
    });
    const selectedStyle = selected ? styles.selected : {};
    return (
      <label
        {...css(styles.label, selectedStyle)}
        data-style="styles.label | styles.selected"
        htmlFor={`${option.id}-slider`}
      >
        <input
          {...css(styles.input)}
          data-style="styles.input"
          id={`${option.id}-slider`}
          title="option"
          type="radio"
          checked={selected}
          value={option.label}
          autoComplete="off"
          onChange={option.action}
        />

        <div
          {...css(styles.text, selectedStyle)}
          data-style="styles.text | styles.selected"
        >
          {option.label}
        </div>
      </label>
    );
  }
);