import React, { useState } from "react";
import style from "./RadioGroup.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";
import getCompliedCustomId from '../../utils/getCompliedCustomId';
import radioPropTypes, {
  radioDefaultProps,
  radioPropsDescription,
  radioGroupProps,
  radioGroupDefaultProps,
  radioGroupPropsDescription,
  radioContextProps,
  radioContextDefaultProps,
  radioContextPropsDescription
} from "./RadioGroup.propTypes";
import constantProps,{ RadioGroupConstant } from "./RadioGroup.constantProps";

export default function RadioGroup(props) {
  let { children, selectedValue, onChange, name, onChangeCallbackHandler, radioCondition } = props;
  let renderChildren = React.Children.map(children, (child,i) => {
    return React.cloneElement(child, {
      key : i,
      name,
      selectedValue,
      onChange : onChangeCallbackHandler(onChange,child.props.onChange),
      radioCondition
    });
  });
  return <RadioGroupLayer {...props}> { renderChildren } </RadioGroupLayer>
}

RadioGroup.propTypes = radioGroupProps;
RadioGroup.defaultProps = radioGroupDefaultProps;
RadioGroup.propsDescription = radioGroupPropsDescription;
RadioGroup.constantProps = RadioGroupConstant;



export function RadioGroupContext(props) {
  return <RadioGroupLayer {...props}> {props.children} </RadioGroupLayer>
}

RadioGroupContext.propTypes = radioContextProps;
RadioGroupContext.defaultProps = radioContextDefaultProps;
RadioGroupContext.propsDescription = radioContextPropsDescription;
RadioGroupContext.constantProps = RadioGroupConstant;



export function RadioGroupLayer(props) {
  let { customClassName={},children,direction,tagAttributeProps,customId={} } = props;
  let radioGroupParent = getCompliedClassName(
    customClassName,
    {
      [style.radioGroup]: true,
      [style[direction]]: !!direction
    },
    {
      [customClassName.radioGroup] : !!customClassName.radioGroup,
      [customClassName.direction] : !!customClassName.direction,
    }
  );
  return (
    <div role='radiogroup' className={radioGroupParent} 
    {...tagAttributeProps}
    data-id={getCompliedCustomId(props,customId.radio_group)}> { children } </div>
  );
}

export function Radio(props) {

  let {
    text,
    value,
    variant,
    size,
    color,
    disabled,
    children,
    tagAttributeProps,
    customClassName,
    customId,
    customIdPrefix,
    customIdSuffix='',
    selectedValue,
    onChange,
    name,
    radioCondition,
    focusVisible,
    focusProps
  } = props;
  
  let isChecked = radioCondition(selectedValue,value)
  let baseClassName = getCompliedClassName(
    customClassName,
    {
      [style.base]: true
    },
    {
      [customClassName.base]: customClassName.base
    }
  );

  let inputClassName = getCompliedClassName(
    customClassName,
    {
      [style.inputradio]: true,
      [style.disabledInputRadio]: !!disabled && !customClassName.disabledInputRadio
    },
    {
      [customClassName.inputradio] : !!customClassName.inputradio,
      [customClassName.disabledInputRadio]: !!customClassName.disabledInputRadio
    }
  );
  let radioBtnClassName = getCompliedClassName(
    customClassName,
    {
      [style.button]: true,
      [style[variant]]: isChecked && !!variant && !customClassName.checked,
      [style[size]]: !!size && !customClassName.size,
      [style.disabledRadio]: !!disabled && !customClassName.disabledRadio,
      [style[color]]: !!color && !customClassName.color,
      [style.focusVisible]: focusVisible && !customClassName.focusVisible
    },
    {
      [customClassName.button]: !!customClassName.button,
      [customClassName.checked]: isChecked && !!customClassName.checked,
      [customClassName.size]: !!customClassName.size,
      [customClassName.disabledRadio]: !!customClassName.disabledRadio,
      [customClassName.color]: !!customClassName.color,
      [customClassName.focusVisible]: focusVisible && !!customClassName.focusVisible
    }
  );
  let labelClassName = getCompliedClassName(
    customClassName,
    {
      [style.label]: true,
      [style.disabledLabel]: !!disabled && !customClassName.disabledLabel
    },
    {
      [customClassName.label]: !!customClassName.labe,
      [customClassName.disabledLabel]: !!customClassName.disabledLabel
    }
  );
  return (
    <div className={baseClassName} {...tagAttributeProps}>
      <span className={radioBtnClassName}>
        <input
          type="radio"
          value={value}
          id={value}
          data-aria-focusstyle={style.focusVisibile}
          name={name}
          className={inputClassName}
          checked={isChecked}
          disabled={disabled}
          data-id={getCompliedCustomId({customId, customIdPrefix, customIdSuffix},customId.radio_group_item,[value])}
          onChange={!disabled ? onChange && onChange.bind(null,value) : null}
          {...focusProps}
        />
      </span>
      {text && (
        <label className={labelClassName} htmlFor={value}>
          {text}
        </label>
      )}
    </div>
  );
}

Radio.propTypes = radioPropTypes;
Radio.defaultProps = radioDefaultProps;
Radio.propsDescription = radioPropsDescription;
Radio.constantProps = constantProps;