import React from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { Divider, DividerProps } from "../Divider";
import { ScrollPane } from "../ScrollPane";
import { bem } from "../../utilities/bem";

const cn = "Aside";

interface AsideProps extends BoxProps {
  disableScrolling?: boolean;
}

interface AsideItemProps extends BoxProps {
  removePadding?: boolean;
}

const AsideDivider = (props: DividerProps) => {
  const { className, ...rest } = props;
  return (
    <Divider
      className={classNames(bem(cn, { e: "item" }), classNames)}
      {...rest}
    />
  );
};

const AsideItem = (props: AsideItemProps) => {
  const { removePadding = false, className, ...rest } = props;

  return (
    <Box
      className={classNames(
        bem(cn, { e: "item" }),
        !removePadding && bem(cn, { e: "item", m: "padded" }),
        className,
      )}
      {...rest}
    />
  );
};

export const Aside = (props: AsideProps) => {
  const { disableScrolling, children, className, ...rest } = props;

  return (
    <ScrollPane
      as="aside"
      disabled={disableScrolling}
      className={className}
      {...rest}
    >
      {children}
    </ScrollPane>
  );
};

Aside.Divider = AsideDivider;
Aside.Item = AsideItem;