import * as React from 'react';
import hyphenate from 'utils/hyphenate';
import classNames from 'classnames/bind';

import s from './ButtonBox.module.scss';

const cn = classNames.bind(s);

interface IButtonBoxProps {
  color?: string;
  title: string;
  subtitle?: string;
  icon: React.ReactNode;
  buttonText?: string;
  buttonSubtext?: string;
  buttonTextSmaller?: boolean;
  selected?: boolean;
  selectedBorder?: boolean;
  menu?: React.ReactNode;
  onClick: () => void;
}

export const ButtonBox = ({
  color,
  title,
  subtitle,
  icon,
  buttonText,
  selected,
  buttonSubtext,
  buttonTextSmaller,
  selectedBorder,
  menu,
  onClick,
}: IButtonBoxProps) => {
  const layout = {
    selected,
    selectedBorder,
    buttonTextSmaller,
  };

  const onMenuInteract = (e: React.MouseEvent) => {
    e.preventDefault();
  };

  return (
    <div className={cn(s.buttonBox, layout, `color-${color}`)}>
      <div className={s.buttonBox__container}>
        <div className={cn(s.buttonBox__shadow, `color-${color}`)}>
          <div className={cn(s.buttonBox__wrapper, `box-shadow-${color}`)}>
            <div className={s.buttonBox__content}>
              {icon && <div className={s.buttonBox__icon}>{icon}</div>}
              {title && <h3 className={cn(s.buttonBox__title, `color-${color}`)}>{title}</h3>}
              {subtitle && (
                <div
                  className={s.buttonBox__subtitle}
                  dangerouslySetInnerHTML={{ __html: hyphenate(subtitle) }} // eslint-disable-line
                />
              )}
            </div>
            <button className={cn(s.buttonBox__button, `color-${color}`)} onClick={onClick}>
              <div className={cn(s.buttonBox__content, { button: true })}>
                <div className={cn(s.buttonBox__buttonText, `color-${color}`)}>{buttonText}</div>
                <div className={s.buttonBox__buttonSubtext}>{buttonSubtext}</div>
              </div>
            </button>
            {menu && (
              <div className={s.buttonBox__edit} onClick={onMenuInteract}>
                {menu}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};