import React from "react";
import Avatar from "../avatar/Avatar";
import Button from "../button/Button";
import Text from "../text/Text";
import Box from "../layout/Box";
import style from "./Card.module.css";
import constantProps from "./Card.constantProps";
import BoxConstantProps from "../layout/Box.constantProps";

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

export default function CardSkeleton(props) {
  let { children, type } = props;
  let Components = {};
  React.Children.forEach(children, (child) => {
    if (child && child.type && child.type.displayName) {
      Components[child.type.displayName] = () => {
        return child;
      };
    }
  });
  if (Object.keys(Components).length) {
    return (
      <Box
        isContainer
        {...props}
        customClassName={style[type] + " " + style.base}
      >
        <Box>{Components.Avatar ? <Components.Avatar /> : null}</Box>
        <Box flexible customClassName={style.spacing}>
          <Box>
            {Components.HeaderActions ? (
              <Box customClassName={style.absposition}>
                {Components.HeaderActions ? <Components.HeaderActions /> : null}
              </Box>
            ) : null}
          </Box>
          {Components.TextFields ? <Components.TextFields /> : null}
          <Box>
            {Components.FooterActions ? <Components.FooterActions /> : null}
          </Box>
        </Box>
      </Box>
    );
  }
  return <>{children}</>;
}

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

// sub comp

export let CardAvatarSkeleton = (props) => {
  if (props.children) {
    return props.children;
  }
  return <Avatar {...props} />;
};
export let CardPrimaryTextSkeleton = (props) => {
  return <Text {...props} />;
};

export let CardSecondaryTextSkeleton = (props) => {
  return <Text {...props} />;
};

export let CardButtonSkeleton = (props) => {
  return <Button {...props} />;
};
export let CardTextFieldsSkeleton = (props) => {
  return (
    <Box direction={BoxConstantProps.direction.column} {...props}>
      {props.children}
    </Box>
  );
};

export let CardFooterActionsSkeleton = (props) => {
  let customeclass = props.customClassName
    ? `${props.customClassName} ${props.isHover ? style.footeractions : ""} `
    : `${props.isHover ? style.footeractions : ""}`;

  return (
    <Box
      isContainer
      direction={BoxConstantProps.direction.row}
      {...props}
      customClassName={customeclass}
    >
      {props.children}
    </Box>
  );
};

export let CardHeaderActionsSkeleton = (props) => {
  return (
    <Box
      isContainer
      direction={BoxConstantProps.direction.row}
      {...props}
      customClassName={props.isHover ? style.headeractions : ""}
    >
      {props.children}
    </Box>
  );
};
