import React, { useEffect, useState } from "react";
import './toggle.css';

type Props = {
    label?:string,
    name: string,
    id:string,
    variant?: 'default' |'primary' | 'secondary' | 'dark',
    size?: 'default' | 'small' | 'medium' | 'large',
    disable?:boolean,
    defaultChecked:boolean,
    icon?:boolean,
    handleChange: (event:any) => void;
}

const CheckedIcon = () => <>🌜</>;
const UncheckedIcon = () => <>🌞</>;

const Toggle = (props:Props) => {
    const [toggle, setToggle] = useState<boolean>(false)
    const {label, name, id, variant, size, disable, defaultChecked, icon, handleChange} = props;
    const triggerToggle = () => {
        if ( disable ) {
            return;
        }

        setToggle(!toggle);
    }
    useEffect(() => {
        if (defaultChecked) {
            setToggle(defaultChecked)
        }
    }, [defaultChecked]);

    return (
        <div onClick={triggerToggle} className="wrap-toggle">
            <div className="toggle-label">
                <p>{label}</p>
            </div>
            <div className={`wrg-toggle ${toggle ? 'wrg-toggle--checked' : ''} ${disable ? 'wrg-toggle--disabled' : ''} ${size ? `toggle-${size}` : ''}`}>
                
                <div className={`wrg-toggle-container ${variant ? `background-${variant}` : ''}`}>
                    <div className="wrg-toggle-check">
                        {icon ? <span><CheckedIcon/></span> : ''}
                        {!icon ? <span>Yes</span> : ''}
                    </div>
                    <div className="wrg-toggle-uncheck">
                        {icon ? <span><UncheckedIcon/></span> : ''}
                        {!icon ? <span>No</span> : ''}
                    </div>
                </div>
                <div className="wrg-toggle-circle"></div>
                <input id={id} name={name} type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
            </div>
        </div>
    );
};

export default Toggle;