import React from "react";

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

type IProps = {
	name?: string;
	option: IOption;
	toolTip?: string;
	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
	checked: boolean;
};

type IState = {
	checked: boolean;
};

export default class CheckBox extends React.Component<IProps, IState> {
	static defaultProps = {
		toolTip: "",
		checked: false,
	};

	constructor(props: IProps) {
		super(props);
		this.state = {
			checked: this.props.checked ?? false,
		};

		this.onChange = this.onChange.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
				<label className={classes["root"]}>
					<input
						type="checkbox"
						name={this.props.name ?? (this.props.option.value as string)}
						value={this.props.option.value as string}
						onChange={this.onChange}
						checked={this.state.checked}
					/>
					{this.props.option.label}
					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
				</label>
			</Typography>
		);
	}

	public override componentDidUpdate(prevProps: Readonly<IProps>): void {
		if (prevProps.checked !== this.props.checked) {
			this.setState({
				checked: this.props.checked,
			});
		}
	}

	private onChange(e: React.ChangeEvent<HTMLInputElement>) {
		this.setState({
			checked: !this.state.checked,
		});

		this.props.onChange && this.props.onChange(e);
	}
}