import React from "react";
import CardBehaviour, {
  AvatarBehaviour,
  PrimaryTextBehaviour,
  SecondaryTextBehaviour,
  ButtonBehaviour,
  TextFieldsBehaviour,
  FooterActionsBehaviour,
  HeaderActionsBehaviour
} from "./Card.behaviour";
import CardSkeleton, {
  CardAvatarSkeleton,
  CardPrimaryTextSkeleton,
  CardSecondaryTextSkeleton,
  CardButtonSkeleton,
  CardFooterActionsSkeleton,
  CardHeaderActionsSkeleton,
  CardTextFieldsSkeleton
} from "./Card.skeleton";
import componentGroups from "../../docs-utils/componentGroups";
import componentCategories from "../../docs-utils/componentCategories";

import cardPropTypes, {
  defaultProps,
  propsDescription
} from "./Card.propTypes";
import constantProps from "./Card.constantProps";

export default function Card(props) {
  return <CardBehaviour {...props} renderComponent={CardSkeleton} />;
}

Card.propTypes = cardPropTypes;
Card.defaultProps = defaultProps;
Card.propsDescription = propsDescription;
Card.constantProps = constantProps;

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

// sub-components

Card.Avatar = (props) => {
  return <AvatarBehaviour {...props} renderComponent={CardAvatarSkeleton} />;
};
Card.Avatar.displayName = "Avatar";
Card.PrimaryText = (props) => {
  return (
    <PrimaryTextBehaviour
      {...props}
      renderComponent={CardPrimaryTextSkeleton}
    />
  );
};
Card.PrimaryText.displayName = "PrimaryText";

Card.SecondaryText = (props) => {
  return (
    <SecondaryTextBehaviour
      {...props}
      renderComponent={CardSecondaryTextSkeleton}
    />
  );
};
Card.SecondaryText.displayName = "SecondaryText";

Card.Button = (props) => {
  return <ButtonBehaviour {...props} renderComponent={CardButtonSkeleton} />;
};
Card.Button.displayName = "Button";
Card.TextFields = (props) => {
  return (
    <TextFieldsBehaviour {...props} renderComponent={CardTextFieldsSkeleton} />
  );
};
Card.TextFields.displayName = "TextFields";

Card.FooterActions = (props) => {
  return (
    <FooterActionsBehaviour
      {...props}
      renderComponent={CardFooterActionsSkeleton}
    />
  );
};
Card.FooterActions.displayName = "FooterActions";

Card.HeaderActions = (props) => {
  return (
    <HeaderActionsBehaviour
      {...props}
      renderComponent={CardHeaderActionsSkeleton}
    />
  );
};
Card.HeaderActions.displayName = "HeaderActions";
