import { useRef } from "react";

import "./Tabs.css";
import {
  renderProps,
  getClassName,
  isMasive,
  getCN,
  get_typeName,
} from "../utils";

import { ButtonGroup, IconButton } from "../../index";

import { IconLeftArrow } from "../../svg_icons/IconLeftArrow";
import { IconRightArrow } from "../../svg_icons/IconRightArrow";

function Tabs({
  children,
  ripple,
  autoScroll = true,
  stretched = false,
  switches = false, // В разработке
  ...props
}: {
  [x: string]: any;
}) {
  const tabsRef = useRef<HTMLInputElement | null>(null);

  return (
    <div
      {...renderProps(props)}
      className={getClassName("MYUI-Tabs", props.className)}
    >
      <div
        ref={tabsRef}
        className={getCN([
          "MYUI-Tabs__in",
          stretched && `MYUI-Tabs__in--stretched`,
          autoScroll && `MYUI-Tabs__in--scroll`,
        ])}
      >
        <div className="MYUI-Tabs__in--wrapper">
          {isMasive(children)
            ? children.map((a: any, index: any) => (
              a && <div
                style={{
                  width: stretched && `calc(100% / ${children.length})`,
                }}
                key={index}
                className={getCN(["MYUI-Tabs__in--content"])}
              >
                {a}
              </div>
            ))
            : children}
        </div>
        {switches && (
          <IconButton
            aria-label="before arrow"
            ripple={ripple}
            onClick={() => {
              console.log(`a`);
            }}
            className="MYUI-Tabs__in--before"
          >
            <IconLeftArrow width={16} height={16} />
          </IconButton>
        )}
        {switches && (
          <IconButton
            aria-label="afte arrow"
            ripple={ripple}
            onClick={() => {
              console.log(`a`);
            }}
            className="MYUI-Tabs__in--after"
          >
            <IconRightArrow width={16} height={16} />
          </IconButton>
        )}
      </div>
    </div>
  );
}

export default Tabs;