import * as React from 'react';
import * as s from './PaymentMethodItem.scss';
import * as classNames from 'classnames';

interface IPaymentMethodItemProps {
  label: string;
  icon?: Node;
  paymentMethodId: string;
  isSelected: boolean;
  radioButtonClassName?: string;
  onPaymentMethodChanged: (pmId: string) => void;
}

export default (props: IPaymentMethodItemProps) => {
  const id = `wcn-payment-method-item-${props.paymentMethodId}`;
  return (
    <label
      className={s.paymentMethod}
      data-hook="wcn-payment-method-item"
      htmlFor={props.paymentMethodId}
      onClick={(e) => {
        if (e) {
          e.stopPropagation();
        }

        return props.onPaymentMethodChanged(props.paymentMethodId);
      }}
    >
      <div className={s.radioContainer}>
        <input
          className={classNames(s.paymentMethodInput, 'wixSdkHideFocus')}
          type="radio"
          name="paymentMethodSelection"
          id={props.paymentMethodId}
          value={props.paymentMethodId}
          checked={props.isSelected}
          onChange={() => {
            // fix React error with checked prop without onChange handler
            return void 0;
          }}
          aria-describedby={`wcn-method-description-${props.paymentMethodId}`}
          data-hook={`wcn-payment-method-item-input-${props.paymentMethodId}`}
        />
        <i className={'wixSdkShowFocus'}
          role="radio"
          aria-checked={props.isSelected ? 'true' : 'false'}
        />
        {props.label}
      </div>
      <div className={s.icon}>
        {props.icon}
      </div>
    </label>
  );
};