import * as React from "react";
import * as _ from 'lodash';
import * as DefaultStyles from "./style";
import { map } from "lodash";
import { RadioItem } from "../../types/global"

export namespace RadioGroup {
    export interface Props {
        items: RadioItem[];
        selectedId: string | undefined;
        title: string;
        onRadioButtonChange: (item: RadioItem) => void;
        styles?: any;
        id?: string;
        name?: string;

    }
    export interface State { }
    export interface Styles {
        RadioInput: any;
        RadioLabel: any;
        RadioWrapper: any;
        Title: any;
    }
}

const RadioGroup = (props: RadioGroup.Props) => {
    const Styles: RadioGroup.Styles = _.merge(DefaultStyles, props.styles);
    return (
        <>
            {map(props.items, item => {
                return (
                    <Styles.RadioWrapper
                        key={item.id}
                        className="radio-wrapper"
                        id={props.id && props.id + '-' + item.id + '-radio-group-radio-wrapper'}
                        name={props.name && props.name + '-' + item.id + '-radio-group-radio-wrapper'}
                    >
                        <Styles.RadioInput
                            className="radio-input"
                            name={props.title}
                            type="radio"
                            checked={item.id === props.selectedId}
                            id={item.id}
                            onChange={() => props.onRadioButtonChange(item)}
                        />
                        <Styles.RadioLabel
                            className="radio-label"
                            htmlFor={item.id}
                            id={props.id && props.id + '-' + item.id + '-radio-group-radio-label'}
                            name={props.name && props.name + '-' + item.id + '-radio-group-radio-label'}
                        >
                            {item.name}
                        </Styles.RadioLabel>
                    </Styles.RadioWrapper>
                );
            })}
        </>
    );
};

export default RadioGroup;