import React from "react";

import Tooltip from "../ToolTip";
import Typography, { ETypo, ETypoColor } from "../Typography";
import classes from "./classes.module.scss";

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

export default class RadioBox extends React.Component<IProps> {
	static defaultProps = {
		disabled: false,
	};
	public override render(): JSX.Element {
		return (
			<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_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}
					/>
					<div className={classes["content"]}>
						{this.props.label && (
							<Typography className={classes["label"]} typo={ETypo.TEXT_SM_SEMIBOLD}>
								{this.props.label}
							</Typography>
						)}
						{this.props.description && (
							<Typography className={classes["description"]} typo={ETypo.TEXT_SM_REGULAR}>
								{this.props.description}
							</Typography>
						)}
					</div>

					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
				</label>
			</Typography>
		);
	}
}