import React, { ChangeEvent, useEffect, useState } from 'react';
import { StyledSwitch, StyledSwitchContainer } from './Switch.theme';
import { ISwitchProps } from './Switch.interface';
import Heading from '@/components/atoms/Heading';



const Switch: React.FC<ISwitchProps> = ({ disabled = false, label, onChange, checked }) => {
    // Ensure the initial state is set to false if checked is undefined
    const [switchState, setSwitchState] = useState(checked !== undefined ? checked : false);

    useEffect(() => {
        setSwitchState(checked !== undefined ? checked : false);
    }, [checked]);

    function handleOnChange(e: ChangeEvent<HTMLInputElement>) {
        setSwitchState((prevState: boolean) => !prevState);
        onChange(!switchState);
    }

    const switchId = `switch-${crypto.randomUUID()}`;

    return (
        <>

            <StyledSwitchContainer>

                {label && <Heading>
                    {label}
                </Heading>}
                <StyledSwitch htmlFor={switchId} checked={switchState} disabled={disabled}>
                    <input
                        id={switchId}
                        type="checkbox"
                        checked={switchState}
                        onChange={handleOnChange}
                        disabled={disabled}
                    />
                </StyledSwitch>
            </StyledSwitchContainer>
        </>
    );
};

export default Switch;