import React from "react";

import "./SimpleCell.css";

import { getCN, renderProps, getClassName } from "../utils";
import ButtonTouch, { IButtonTouch } from "../ButtonTouch/ButtonTouch";
import { IconRightArrow } from "../../svg_icons/IconRightArrow";

type ISimpleCell = {
  children?: React.ReactNode,
  before?: React.ReactNode,
  after?: React.ReactNode,
  description?: React.ReactNode,
  bottom?: React.ReactNode,
  onClick?: IButtonTouch["onClick"],
  stopPropagation?: boolean,
  preventDefault?: boolean,
  expandable?: boolean,
  modeButtonTouch?: string
  disabled?: IButtonTouch["disabled"]

  //ButtonTouch
  ripple?: boolean

  //...props
  className?: string | undefined
}
const SimpleCell = ({
  children,
  before,
  description,
  bottom,
  after,
  onClick,
  stopPropagation = true,
  preventDefault = false,
  expandable = false,
  modeButtonTouch = "background",
  ripple,
  className,
  disabled,
  ...props
}: ISimpleCell) => {
  return (
    <div {...props} className={getClassName([`MYUI-SimpleCell`], className)}>
      <ButtonTouch
        disabled={disabled}
        modeActive={modeButtonTouch}
        ripple={ripple}
        stretched
        stopPropagation={stopPropagation}
        preventDefault={preventDefault}
        onClick={onClick}
      >
        <div
          className={getCN([
            "MYUI-SimpleCell__in",
            bottom && "MYUI-SimpleCell__in--bottom",
          ])}
        >
          {before && <div className={getClassName(`SimpleCell__before`)}>{before}</div>}
          <div className={getClassName(`SimpleCell__main`)}>
            <div className={getClassName(`SimpleCell__content`)}>
              {children && (<div className={getClassName(`SimpleCell__children`)}>{children}</div>)}
              {description && (<div className={getClassName(`SimpleCell__description`)}>{description}</div>)}
            </div>
            {bottom && <div className={getClassName(`SimpleCell__bottom`)}>{bottom}</div>}
          </div>

          {after && <div className={getClassName(`SimpleCell__after`)}>{after}</div>}

          {expandable == true && (<span className={getClassName(`SimpleCell__expandable`)}><IconRightArrow width={16} height={16} /></span>)}
          {expandable != true && (<span className={getClassName(`SimpleCell__expandable`)}>{expandable}</span>)}
        </div>
      </ButtonTouch>
    </div>
  );
}

export default SimpleCell;