import React from 'react';
import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
import { CheckboxGroupButtons } from './CheckboxGroupButtons';
import { Orientation } from '../../Enums/Orientation';

interface IOrientationCheckboxesProps {
  id: string
  name: string
  labelText: string
  value: Orientation[]
  onChange: (key: string, value: number[]) => void
}

export function OrientationCheckboxes({
  id,
  name,
  labelText,
  value,
  onChange
}: IOrientationCheckboxesProps): JSX.Element {
  return <CheckboxGroupButtons
    key={id}
    name={name}
    selectedValues={value}
    inputClassName='hidden'
    labelText={labelText}
    colQty={2}
    inputGroups={[
      {
        key: `${id}-horizontal`,
        text: (
          <div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
            <ChevronUpDownIcon className='heroicon p-1' />
          </div>
        ),
        value: Orientation.Horizontal
      },
      {
        key: `${id}-vertical`,
        text: (
          <div title='Vertical' aria-label='vertical' className='radio-button-icon'>
            <ChevronUpDownIcon className='heroicon rotate-90 p-1' />
          </div>
        ),
        value: Orientation.Vertical
      }
    ]}
    onChange={(newSelectedValues) => {
      onChange(id, newSelectedValues);
    }}
  />;
}