import { useMemo } from 'react';

import { type SelectableValue } from '@grafana/data';
import { t } from '@grafana/i18n';
import { Field, RadioButtonGroup } from '@grafana/ui';

import { type GroupConditionCondition } from './types';

interface Props {
  value: GroupConditionCondition;
  onChange: (value: GroupConditionCondition) => void;
}

export const ConditionalRenderingGroupCondition = ({ value, onChange }: Props) => {
  const options: Array<SelectableValue<GroupConditionCondition>> = useMemo(
    () => [
      { label: t('dashboard.conditional-rendering.conditions.group.condition.all', 'Match all'), value: 'and' },
      { label: t('dashboard.conditional-rendering.conditions.group.condition.any', 'Match any'), value: 'or' },
    ],
    []
  );

  return (
    <Field label={t('dashboard.conditional-rendering.conditions.group.condition.label', 'Match rules')} noMargin>
      <RadioButtonGroup fullWidth options={options} value={value} onChange={onChange} />
    </Field>
  );
};
