import React from 'react';
import classNames from 'classnames';

import { RadioGroup as CoreRadioGroup } from '@shoptet/ui-core-web';

import { IconButton } from '../../IconButton/IconButton';
import { Tooltip } from '../../Tooltip/Tooltip';

import type { SelectKey } from './RadioGroup';
import type { RenderRadioGroupOptionProps } from './types';

/** @inheritdoc */
export interface RadioGroupOptionInheritedRenderRadioOptionProps<
  V extends SelectKey = SelectKey,
> extends RenderRadioGroupOptionProps<V> {}

export interface RadioGroupOptionOwnProps {
  /**
   * Slot for rendering additional action elements next to the radio option (e.g., buttons).
   */
  actionSlot?: React.ReactNode;
}

export type RadioGroupOptionProps<V extends SelectKey = SelectKey> =
  RadioGroupOptionInheritedRenderRadioOptionProps<V> & RadioGroupOptionOwnProps;

export function RadioGroupOption<V extends SelectKey>({
  value,
  checked,
  disabled,
  required,
  textLabel,
  description,
  validity,
  onChange,
  actionSlot,
  ref,
  ...rest
}: RadioGroupOptionProps<V>) {
  rest satisfies Record<PropertyKey, never>;

  return (
    <div className='v2FormField__radio' data-version='radio-option-react'>
      <div className='radioRow'>
        <CoreRadioGroup.Option<V>
          label={textLabel}
          value={value}
          checked={checked}
          onChange={onChange}
          required={required}
          disabled={disabled}
          invalid={validity === 'error'}
        >
          <CoreRadioGroup.Option.Button
            {...rest}
            ref={ref}
            className={classNames('radioField', {
              'error-field': validity === 'error',
              'warning-field': validity === 'warning',
            })}
          />
          <CoreRadioGroup.Option.Label>{textLabel}</CoreRadioGroup.Option.Label>
        </CoreRadioGroup.Option>

        {description && (
          <Tooltip content={description}>
            <IconButton ghost icon='shp-info' />
          </Tooltip>
        )}

        {actionSlot}
      </div>
    </div>
  );
}