/**
 * External dependencies.
 */
import clsx from 'clsx';
import { Switch } from '@headlessui/react'
import { useState, useEffect } from '@wordpress/element';
const ToggleInput = ({ id, label, description, value, className, options, setOption, ...props }) => {
    const [enabled, setEnabled] = useState(false);

    useEffect(() => {
        setEnabled( value );
    }, [value]);

    const handleChange = v => {
        setOption( v, id );
        setEnabled( v );
    };

    return (
        <fieldset disabled={props.disabled}>
            <Switch.Group as="div" className="flex items-start">
                <Switch
                    checked={enabled}
                    onChange={handleChange}
                    disabled={props.disabled}
                    className={clsx(
                        enabled ? 'bg-[#2563eb]' : 'bg-gray-200',
                        props.disabled && 'opacity-50 cursor-not-allowed',
                        'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2'
                    )}
                >
                    <span
                        aria-hidden="true"
                        className={clsx(
                            enabled ? 'translate-x-5' : 'translate-x-0',
                            'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
                        )}
                    />
                </Switch>
                <Switch.Label as="span" className={clsx(
                    "ml-3 text-sm flex-1 min-w-0",
                    props.disabled && "opacity-50"
                )}>
                    <span className="font-medium text-gray-900 block">{label}</span>
                    {description && <span className="text-gray-500 block mt-1">{description}</span>}
                </Switch.Label>
            </Switch.Group>
        </fieldset>

    );
}

export default ToggleInput;