import React, {ReactNode} from "react";
import './custom-radio-button.scss';
import Close from "../../SVG/Close";

interface CustomRadioSelectProps {
    placeholder?: string;
    children: ReactNode[];
    disabled?: boolean;
    handleChange: (n: any) => void;
    value?: any;
    isLoading?: boolean;
    theme?: 'default' | 'service-header' | 'search-listbox' | 'form-options';
    hasError?: string;
    isForGate?: boolean;
    validation?: (v: any) => void;
    arrowColor?: string;
}

export default function CustomRadioButton({
                                              arrowColor,
                                              placeholder,
                                              value,
                                              disabled = false,
                                              children,
                                              handleChange,
                                              isLoading = false,
                                              theme = 'default',
                                              hasError = '',
                                              validation
                                          }: CustomRadioSelectProps) {
    let selectedValue = value;

    const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        handleChange(e.target.value);
    };

    return (
        <>
            <div className={`custom-radio-button ${theme} ${hasError && 'hasError'}`}>
                {!disabled && (
                    <div className="options">
                        {React.Children.map(children, (child, index) => {
                            if (React.isValidElement(child)) {
                                return (
                                    <label key={index} className="radio-option">
                                        <input
                                            type="radio"
                                            value={child.props.value}
                                            checked={selectedValue === child.props.value}
                                            onChange={handleOptionChange}
                                            disabled={isLoading}
                                        />
                                        <div className="radio-input">
                                            {selectedValue === child.props.value && (
                                                <span className="check-mark-svg">
                                                 <Close/>
                                                </span>
                                            )}
                                            <span>{child}</span>
                                        </div>
                                    </label>
                                );
                            }
                            return child;
                        })}
                    </div>
                )}
            </div>
        </>
    );
}