import React from 'react';
import { Knob } from './knob';
import { TKnobVariant, TValue } from '../types';
import { SRow } from '../../common/s-components/layout/s-row';

type TProps = {
  onChange: (value: TValue) => void;
  value?: TValue;
};

const knobs = [
  {
    variant: 'red',
    label: 0,
  },
  {
    variant: 'red',
    label: 1,
  },
  {
    variant: 'red',
    label: 2,
  },
  {
    variant: 'red',
    label: 3,
  },
  {
    variant: 'red',
    label: 4,
  },
  {
    variant: 'red',
    label: 5,
  },
  {
    variant: 'red',
    label: 6,
  },
  {
    variant: 'orange',
    label: 7,
  },
  {
    variant: 'orange',
    label: 8,
  },
  {
    variant: 'green',
    label: 9,
  },
  {
    variant: 'green',
    label: 10,
  },
];

export const KnobGroup: React.FC<TProps> = props => {
  const { onChange, value } = props;

  return (
    <SRow flexWrap="wrap" justifyContent="center">
      {knobs.map(({ variant, label }) => (
        <Knob
          key={label}
          onPress={() => onChange(label)}
          variant={variant as TKnobVariant}
          selected={value === label}
          m={8}
        >
          {label}
        </Knob>
      ))}
    </SRow>
  );
};