import React from 'react';
import getCompliedClassName from '../../utils/getCompliedClassName';
import Group from '../group/Group';
import style from './Checkbox.module.css';
import getCompliedCustomId from '../../utils/getCompliedCustomId';
import Checkbox from './Checkbox';

export default function CheckboxSkeleton(props){
  let {
  disabled,
  isReadOnly,
  eleRef,
  text,
  indeterminate,
  customClassName={},
  customId,
  onChange,
  value,
  name,
  size,
  color,
  id,
  customIdPrefix,
  customIdSuffix='',
  tagAttributeProps,
  selectedValue,
  checkCondition,
  checked,
  }=props 
  let isChecked=checkCondition && checkCondition(value,selectedValue)
  if((!checkCondition) && props.hasOwnProperty("checked")){
    isChecked = checked;
  }
  let checkClass=getCompliedClassName(
    customClassName,
    {
      [style.base]:true,
      [style.checkContainment]: !!isChecked,
      [style.indeterminate]: !!indeterminate,
      [style[size]]: !!size,
      [style[color]]: !!color,
      [style.pointer]: ((isReadOnly || disabled)?false:true),
      [style.disabled]: !!disabled,
    },
    {
      [customClassName.base]: !!customClassName.base,
      [customClassName.checked]: !!customClassName.checked,
      [customClassName.disabled]:!!customClassName.disabled,
      [customClassName.size]: !!customClassName.size,
      [customClassName.color]: !!customClassName.color
      
  })
  let inputClass=getCompliedClassName(
      customClassName,
      {
          [style.inputCheckbox]: true,
      },
      {
          [customClassName.input]: !!customClassName.input
      }
  )
  let labelClass=getCompliedClassName(
      customClassName,
      {
          [style.label]: true,
          [style.readonly]: !!isReadOnly,
      },
      {
          [customClassName.label]:!!customClassName.label,
          [customClassName.readonly]: !!customClassName.readonly
      }
  )
  let chButtonClass=getCompliedClassName(
      customClassName,{
          [style.check_button]: true
      },
      {
          [customClassName.checkButton]: !!customClassName.checkButton
      }
  )
  return(
      <span className={checkClass} {...tagAttributeProps}>
          <span className={chButtonClass}>
              <input 
              type='checkbox' 
              className={inputClass}
              id={id?id:value} 
              ref={eleRef}
              disabled={disabled}
              readOnly={isReadOnly}
              value={value}
              name={name}
              checked={isChecked}
              data-id={getCompliedCustomId({customId, customIdPrefix, customIdSuffix},customId.checkbox,[value])}
              onChange={!disabled ? onChange && onChange.bind(null,value): null}
            />
          </span>
          <label className={labelClass}  htmlFor={id ?id:value}>{text}</label>
      </span>
  )
}

export function CheckboxGroup(props) {
  let { children, selectedValue,onChange, name, onChangeCallbackHandler,checkCondition,tagAttributeProps } = props;
  let renderChildren = React.Children.map(children, (child) => {
    return React.cloneElement(child, {
      selectedValue,
      name,
      checkCondition,
      onChange:onChangeCallbackHandler(onChange,child.props.onChange),
    });
  });
  return <CheckboxGroupLayer {...props}> {renderChildren} </CheckboxGroupLayer>;
}
  
export function CheckboxGroupContext(props) {
  return <> {props.children?props.children:props.options.map((item,i)=>{
    return(<Checkbox key={i} {...item} />)
  })} </>;
}
  
export function CheckboxGroupLayer(props) {
  let { 
    customClassName = {},
    children,
    direction,
    wrap,
    gap,
    customId,
    customIdPrefix,customIdSuffix,
    role,
    tagAttributeProps 
  } = props;
  return (
    <Group {...role} direction={direction} customId={getCompliedCustomId({customId, customIdPrefix, customIdSuffix},customId.checkboxgroup)} customClassName={{base:customClassName}} wrap={wrap} gap={gap} {...tagAttributeProps}>
      {children}
    </Group>
  );
}