import * as React from 'react';

import { faArrowsAlt } from '@fortawesome/free-solid-svg-icons/faArrowsAlt';
import { faPaintbrush } from '@fortawesome/free-solid-svg-icons/faPaintbrush';
import { faSearchPlus } from '@fortawesome/free-solid-svg-icons/faSearchPlus';
import { faSquare } from '@fortawesome/free-solid-svg-icons/faSquare';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { SegmentedControl, Tooltip } from '@mantine/core';

import { EScatterSelectSettings } from '../interfaces';

interface BrushOptionProps {
  callback: (dragMode: EScatterSelectSettings) => void;
  dragMode: EScatterSelectSettings;
  options?: EScatterSelectSettings[];
}

export function BrushOptionButtons({
  callback,
  dragMode,
  options = [EScatterSelectSettings.RECTANGLE, EScatterSelectSettings.LASSO, EScatterSelectSettings.PAN, EScatterSelectSettings.ZOOM],
}: BrushOptionProps) {
  return (
    <SegmentedControl
      data-testid="BrushOptions"
      value={dragMode}
      onChange={callback}
      data={[
        {
          label: (
            <Tooltip withArrow arrowSize={6} label="Rectangular brush">
              <FontAwesomeIcon icon={faSquare} />
            </Tooltip>
          ),
          value: EScatterSelectSettings.RECTANGLE,
        },
        {
          label: (
            <Tooltip withArrow arrowSize={6} label="Lasso brush">
              <FontAwesomeIcon icon={faPaintbrush} />
            </Tooltip>
          ),
          value: EScatterSelectSettings.LASSO,
        },
        {
          label: (
            <Tooltip withArrow arrowSize={6} label="Zoom/Pan">
              <FontAwesomeIcon icon={faArrowsAlt} />
            </Tooltip>
          ),
          value: EScatterSelectSettings.PAN,
        },
        {
          label: (
            <Tooltip withArrow arrowSize={6} label="Rectangular zoom">
              <FontAwesomeIcon icon={faSearchPlus} />
            </Tooltip>
          ),
          value: EScatterSelectSettings.ZOOM,
        },
      ].filter((d) => options.includes(d.value))}
    />
  );
}