import React from "react";

import Tooltip from "../ToolTip";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";

type IProps = {
	children: React.ReactNode;
	name: string;
	toolTip?: string;
	checked?: boolean;
	defaultChecked?: boolean;
	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
	value: string;
	disabled: boolean;
};

export default class RadioBox extends React.Component<IProps> {
	static defaultProps = {
		disabled: false,
		defaultChecked: false,
	};
	public override render(): JSX.Element {
		return (
			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
				<label className={classes["root"]}>
					<input
						type="radio"
						name={this.props.name}
						checked={this.props.checked}
						defaultChecked={this.props.defaultChecked}
						onChange={this.props.onChange}
						value={this.props.value}
						disabled={this.props.disabled}
					/>
					{this.props.children}
					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
				</label>
			</Typography>
		);
	}

	public override componentDidMount(): void {
		console.log(this.props);
	}
}