import React, {ReactNode} from 'react';
import './customtoggler.scss';

export type TriState = boolean | null | string;

type CustomTogglerProps = {
    children?: any
    color?: string;
    onChange: (value: TriState) => void;
    checked: TriState;
    triState?: boolean;     // <-- new explicit prop
    smol?: boolean;
    label?: string;
    name?: string;
    textColor?: 'white' | 'dark' | 'semi';
    bold?: boolean;
    customClass?:string
    readOnly?: boolean;
    disabled?:boolean
    // Optional per-state color overrides (any valid CSS color).
    // If omitted, falls back to the existing class-based colors (unchanged behavior).
    stateOnColor?: string;
    stateOffColor?: string;
    stateNullColor?: string;
};

const CustomToggler = ({children,
                           onChange,
                           disabled,
                           bold = false,
                           textColor = 'white',
                           color = 'secondary-color',
                           checked,
                           triState = false,      // <-- tri-state only if prop says so
                           name = '',
                           label = '',
                           smol = false,
                           customClass,readOnly=false,
                           stateOnColor,
                           stateOffColor,
                           stateNullColor,
                       }: CustomTogglerProps) => {

    const handleClick = () => {
        if (disabled) return; // <-- guard
        if (readOnly) return; // ✅ stop interaction

        let next: TriState;

        if (triState) {
            if (checked === null) next = true;
            else if (checked === true) next = false;
            else next = null;
        } else {
            next = checked === true ? false : true;
        }

        onChange(next);
    };

    // Only produces an inline override when the caller passed a color for
    // this specific state; otherwise the existing SCSS classes decide the look.
    const getColorOverride = (): React.CSSProperties | undefined => {
        const overrideColor =
            checked === null ? stateNullColor
                : checked ? stateOnColor
                    : stateOffColor;

        if (!overrideColor) return undefined;

        return { backgroundColor: overrideColor, borderColor: overrideColor };
    };

    return (
        <label
            className={`${customClass} custom-toggler 
        ${smol ? 'small' : ''} 
        ${triState ? 'tri-state' : ''}`}
            onClick={handleClick}
        >
            {label && (
                <p style={bold ? { fontWeight: 700 } : undefined} className={textColor}>
                    {label}:
                </p>
            )}

            <input
                type="hidden"
                name={name}
                value={checked === null ? '' : String(checked)}
                readOnly
            />

            <div
                className={`slider round  ${readOnly ? 'readonly' : ''} ${color} ${
                    checked === null ? 'state-null' : checked ? 'state-on' : 'state-off'
                }`}
                style={getColorOverride()}
            >{children}</div>
        </label>
    );
};

export default CustomToggler;