import React from 'react';
import { VisuallyHidden } from 'react-aria';
import classNames from 'classnames';

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

import { Icon } from '../../Icon/Icon';
import type { ImageProps } from '../../Image/Image';
import { Image } from '../../Image/Image';

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

/** @inheritdoc */
export interface RadioGroupImageOptionInheritedImageProps
  extends SafePick<ImageProps, 'src' | 'fit' | 'aspectRatio' | 'size'>, SafePick<Partial<ImageProps>, 'alt'> {}

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

/** @inheritdoc */
export interface RadioGroupImageOptionProps<V extends SelectKey = SelectKey>
  extends RadioGroupImageOptionInheritedImageProps, RadioGroupImageOptionInheritedRadioOptionProps<V> {}

export function RadioGroupImageOption<V extends SelectKey>({
  value,
  checked,
  disabled,
  required,
  textLabel,
  description,
  validity,
  onChange,
  ref,
  src,
  alt,
  fit = 'contain',
  aspectRatio = '3 / 2',
  size = 'md',
  ...rest
}: RadioGroupImageOptionProps<V>) {
  rest satisfies Record<PropertyKey, never>;

  const resolvedAlt = alt ?? (description ? `${textLabel} ${description}` : textLabel);

  return (
    <CoreRadioGroup.Option<V>
      label={textLabel}
      value={value}
      checked={checked}
      onChange={onChange}
      required={required}
      disabled={disabled}
      invalid={validity === 'error'}
    >
      <span
        className={classNames('radioGroup__imageOption', {
          'radioGroup__imageOption--checked': checked,
          'radioGroup__imageOption--disabled': disabled,
          'radioGroup__imageOption--error': validity === 'error',
          'radioGroup__imageOption--warning': validity === 'warning',
        })}
      >
        <VisuallyHidden>
          <CoreRadioGroup.Option.Button ref={ref} />
        </VisuallyHidden>

        <CoreRadioGroup.Option.Label className='radioGroup__imageOption__label'>
          <Image src={src} alt={resolvedAlt} fit={fit} aspectRatio={aspectRatio} size={size} />

          <span className='radioGroup__imageOptionCheckmark'>
            {checked ? (
              <Icon icon='shp-visible' size='md' variant='default' />
            ) : (
              <span className='radioGroup__imageOptionCheckmarkEmpty' />
            )}
          </span>
        </CoreRadioGroup.Option.Label>
      </span>
    </CoreRadioGroup.Option>
  );
}