import React from "react";
import componentCategories from "../../docs-utils/componentCategories";
import componentGroups from "../../docs-utils/componentGroups";
import CheckboxBehaviour,{ CheckboxContextBehaviour,CheckboxGroupBehaviour } from "./Checkbox.behaviour";
import CheckboxSkeleton,{ CheckboxGroupLayer,CheckboxGroup as CheckboxGroupSkeleton, CheckboxGroupContext as CheckboxGroupContextSkeleton  } from "./Checkbox.skeleton";

import checkboxPropTypes, {
  checkboxDefaultProps,
  checkboxPropsDescription,
  checkboxGroupProps,
  checkboxGroupDefaultProps,
  checkboxGroupPropsDescription,
  checkboxContextProps,
  checkboxContextDefaultProps,
  checkboxContextPropsDescription
} from "./Checkbox.propTypes";
import CheckboxConstant,{ checkboxGroupConstant } from "./Checkbox.constantProps";

export function CheckboxGroup(props){
  return <CheckboxGroupBehaviour {...props}
    renderComponent={CheckboxGroupSkeleton}  
  />

}

export function CheckboxGroupContext(props){
  return <CheckboxContextBehaviour {...props}
  renderComponent={CheckboxGroupContextSkeleton}  
/>
}
export default function Checkbox(props) {
  return(
    <CheckboxBehaviour {...props} renderComponent={CheckboxSkeleton} />
  )
  // let { size, ariaLabel, style, label, checked, disabled, type, shape } = props;
  // return (
  //   <span className={styles.container}>
  //     <input type="checkbox" checked={checked} disabled={disabled} />
  //     <span
  //       className={styles.checkmark + " " + styles[type] + " " + styles[shape]}
  //     ></span>
  //     <label>{label ? label : null}</label>
  //   </span>
  // );
  
}

CheckboxGroup.propTypes = checkboxGroupProps;
CheckboxGroup.defaultProps = checkboxGroupDefaultProps;
CheckboxGroup.propsDescription = checkboxGroupPropsDescription;
CheckboxGroup.constantProps = checkboxGroupConstant;

Checkbox.propTypes = checkboxPropTypes;
Checkbox.defaultProps = checkboxDefaultProps;
Checkbox.propsDescription = checkboxPropsDescription;
Checkbox.constantProps = CheckboxConstant;

CheckboxGroupContext.propTypes = checkboxContextProps;
CheckboxGroupContext.defaultProps = checkboxContextDefaultProps;
CheckboxGroupContext.propsDescription = checkboxContextPropsDescription;
CheckboxGroupContext.constantProps = checkboxGroupConstant;

if (__DOCS__) {
  Checkbox.docs = {
    componentGroup: componentGroups.Atom,
    folderName: componentCategories.Form
  };
}
