import _ from 'lodash-es';
import React from 'react';
import { useDispatch } from 'react-redux';
import { Button, ButtonGroup } from 'reactstrap';
import { sendCommand } from '../../../actions/atorch';
import { CommandSet } from '../../../service/atorch-packet';

interface Props {
  type: number;
}

// eslint-disable-next-line react/display-name
export const Toolbar = React.memo<Props>(({ type }) => {
  const dispatch = useDispatch();
  const btnFn: Record<string, () => Buffer> = {
    'Setup': CommandSet.setup.bind(null, type),
    '\u2795': CommandSet.setPlus.bind(null, type),
    '\u2796': CommandSet.setMinus.bind(null, type),
    'Enter': CommandSet.enter.bind(null, type),
    'Reset All': CommandSet.resetAll.bind(null, type),
  };
  const makeCommand = (cb: () => Buffer | undefined) => () => {
    dispatch(sendCommand(cb()));
  };
  return (
    <ButtonGroup>
      {_.map(btnFn, (builder, text) => (
        <Button key={text} outline onClick={makeCommand(builder)}>
          {text}
        </Button>
      ))}
    </ButtonGroup>
  );
});