import React from "react";

import { getCN, isMasive, get_typeName } from "../utils";
import "./Padding.css";

import { CardGrid } from "../../index";

function Padding({
  children,
  padding = `default`,
  paddingLeft,
  paddingRight,
  paddingTop,
  paddingBottom,
  paddingLeftRight,
  paddingTopBottom,
  ...props
}: {
  [x: string]: any;
}) {
  const [className, setClassName] = React.useState(
    getCN([
      padding && `MYUI-Padding`,
      !paddingLeft &&
        !paddingRight &&
        !paddingTop &&
        !paddingBottom &&
        padding &&
        `MYUI-Padding--${padding}`,

      !paddingLeftRight && paddingLeft && `MYUI-Padding__left--${paddingLeft}`,
      !paddingLeftRight &&
        paddingRight &&
        `MYUI-Padding__right--${paddingRight}`,
      paddingLeftRight && `MYUI-Padding__left--${paddingLeftRight}`,
      paddingLeftRight && `MYUI-Padding__right--${paddingLeftRight}`,

      !paddingTopBottom && paddingTop && `MYUI-Padding__top--${paddingTop}`,
      !paddingTopBottom &&
        paddingBottom &&
        `MYUI-Padding__bottom--${paddingBottom}`,
      paddingTopBottom && `MYUI-Padding__top--${paddingTopBottom}`,
      paddingTopBottom && `MYUI-Padding__bottom--${paddingTopBottom}`,
    ])
  );

  const [no_child, setno_child] = React.useState([<Padding />]);

  React.useEffect(() => {
    setClassName(
      getCN([
        padding && `MYUI-Padding`,
        !paddingLeft &&
          !paddingRight &&
          !paddingTop &&
          !paddingBottom &&
          padding &&
          `MYUI-Padding--${padding}`,

        !paddingLeftRight &&
          paddingLeft &&
          `MYUI-Padding__left--${paddingLeft}`,
        !paddingLeftRight &&
          paddingRight &&
          `MYUI-Padding__right--${paddingRight}`,
        paddingLeftRight && `MYUI-Padding__left--${paddingLeftRight}`,
        paddingLeftRight && `MYUI-Padding__right--${paddingLeftRight}`,

        !paddingTopBottom && paddingTop && `MYUI-Padding__top--${paddingTop}`,
        !paddingTopBottom &&
          paddingBottom &&
          `MYUI-Padding__bottom--${paddingBottom}`,
        paddingTopBottom && `MYUI-Padding__top--${paddingTopBottom}`,
        paddingTopBottom && `MYUI-Padding__bottom--${paddingTopBottom}`,
      ])
    );
    /*if (!isMasive(children)) {
      if (!paddingLeft) {
        if (!paddingRight) {
          if (!paddingTop) {
            if (!paddingBottom) {
              if (!paddingLeftRight) {
                if (!paddingTopBottom) {
                  setClassName(
                    getCN([
                      padding && `MYUI-Padding`,
                      `MYUI-Padding--${padding}--one`,
                    ])
                  );
                }
              }
            }
          }
        }
      }
    }*/
  }, [
    padding,
    paddingLeft,
    paddingRight,
    paddingTop,
    paddingBottom,
    paddingLeftRight,
    paddingTopBottom,
    children,
  ]);

  return children;

  if (isMasive(children)) {
    return children.map((child: any, index: any) => {
      if (isMasive(child)) {
        return child.map((m_child: any, m_index: any) =>
          !get_typeName(m_child, no_child) ? (
            <div key={m_index} {...props} className={className}>
              {m_child}
            </div>
          ) : (
            m_child
          )
        );
      } else {
        return child && !get_typeName(child, no_child) ? (
          <div key={index} {...props} className={className}>
            {child}
          </div>
        ) : (
          child
        );
      }
    });
  } else {
    return (
      <div {...props} className={className}>
        {children}
      </div>
    );
  }
}

export default Padding;