import { useCallback, useEffect, useState } from "react";

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

type IProps = {
	onChange?: (checked: boolean) => void;
	checked?: boolean;
	label: string;
	disabled?: boolean;
};
export default function Switch({ onChange, checked, label, disabled }: IProps) {
	const [isChecked, setIsChecked] = useState<boolean>(checked ? checked : false);

	useEffect(() => {
		setIsChecked(checked ? checked : false);
	}, [checked]);

	const handleChange = useCallback(() => {
		setIsChecked(!isChecked);
		onChange?.(!isChecked);
	}, [isChecked, onChange]);

	return (
		<div className={classes["root"]}>
			<div className={disabled ? classes["disabled"] : classes["root"]} onClick={disabled ? () => {} : handleChange}>
				<div className={classes["switch-container"]} data-checked={isChecked.toString()}>
					<div className={classes["round"]} />
				</div>
			</div>
			<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
				{label}
			</Typography>
		</div>
	);
}