import { HTMLAttributes, useEffect } from "react";

import { Padding } from "../../index";
import { IButtonTouch } from "../ButtonTouch/ButtonTouch";
import { getClassName, isDevaice, radnomPropsId } from "../utils";

import "./Group.css";

interface IGroup extends HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode,
  top?: React.ReactNode,
  description?: React.ReactNode,
  autoPadding?: boolean,
  background?: boolean,
  padding?: "auto" | "desktop" | "mobile",
  onClick?: IButtonTouch["onClick"]

  className?: HTMLAttributes<HTMLElement>["className"]
};

const Group = ({
  children,
  top,
  description,
  autoPadding = false, // false - Выключает автоматическое расставление отступов
  background = true, // false - Выключает background
  padding = `desktop`,
  onClick,

  className,
  ...props
}: IGroup) => {
  return (
    <section
      onClick={(e) => {
        if (onClick) onClick(e);
      }}
      {...props}
      data-is_description={!!description}
      className={getClassName(
        [
          `Group`,
          `Group--${padding == `auto` ? isDevaice() : padding ? `desktop` : `mobile`
          }`,
        ],
        className
      )}
    >
      {top && (
        <div className="MYUI-Group__top">{top}</div>
      )}
      <div
        className={getClassName([
          `MYUI-Group__in`,
          background && `Background__primary`,
        ])}
      >
        {autoPadding ? <Padding>{children}</Padding> : children}
      </div>
      {description && (
        <div className="MYUI-Group__description">{description}</div>
      )}
    </section>
  );
}

export default Group;