import * as React from 'react';
import RadioButtons, { RadioButtonProps } from '../../../containers/radio-button/RadioButton';
import { flatRadioButtonStyle } from './flatRadioButton.style';
import LabelWrapper from '../../common-inputs/common-input-left-dot/inner-comps/label/Label';
import RadioButton from './inner-comps/RadioButton';

class FlatRadioButton extends React.Component<RadioButtonProps> {
	shouldComponentUpdate(nextProps: RadioButtonProps) {
		return this.props.selectedRadio !== nextProps.selectedRadio;
	}
	render() {
		return (
			<RadioButtons
				{...this.props}
				render={(onChange: (e: React.ChangeEvent<HTMLInputElement>) => void) => {
					return (
						<div
							className={flatRadioButtonStyle(this.props.palette)}
							data-automation={this.props.automationName}
						>
							<LabelWrapper
								required={this.props.required}
								label={this.props.label}
								valid={this.props.valid}
								name={this.props.name}
								errorMessage={this.props.errorMessage}
								palette={this.props.palette}
								tooltip={this.props.tooltip}
							/>
							{this.props.options.map((option: { label: string; id: string }) => {
								return (
									<RadioButton
										label={option.label}
										id={option.id}
										palette={this.props.palette}
										onChange={onChange}
										selected={option.id === this.props.selectedRadio}
										key={option.id}
										translator={this.props.translator}
									/>
								);
							})})
						</div>
					);
				}}
			/>
		);
	}
}

export default FlatRadioButton;