import React from 'react';
import { SelectRuleBlock } from '../SelectRuleBlock';

import { SelectOption } from '../../../types/select';
import { noop } from '../../../utils/fns';


export interface InverterBlockProps {
  initialValue: boolean;
  labelType: InverterLabel;
  onValueChange?: (isInverted: boolean) => void;
}
export enum InverterLabel {
  Has = "Has",
  Did = "Did",
  Is = "Is",
}

export const InverterBlock: React.FC<InverterBlockProps> = ({
  initialValue = false,
  labelType,
  onValueChange = noop,
}) => {
  const inversionOptions: SelectOption<boolean>[] = [
    { label: `${labelType}`, value: false },
    { label: `${labelType} not`, value: true },
  ];

  const handleInversionChange = ([option]: SelectOption<boolean>[]) => {
    onValueChange(option.value);
  };

  return (
    <SelectRuleBlock<boolean>
      selectedValues={initialValue}
      onOptionSelectionChange={handleInversionChange}
      options={inversionOptions}
    />
  );
};
