import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from '../../utils/classnames';

export default function Container({
  children,
  title,
  events = {},
  className,
  style,
  id,
}) {
  return (
    <div
      role="container"
      id={id}
      style={style}
      className={classNames({ 'weda-ui': true, [className]: className })}
      title={title}
      onClick={(e) => events.tap({}, { originEvent: e })}
      onContextMenu={(e) => events.longpress({}, { originEvent: e })}
      onTouchStart={(e) => events.touchstart({}, { originEvent: e })}
      onTouchMove={(e) => events.touchmove({}, { originEvent: e })}
      onTouchCancel={(e) => events.touchcancel({}, { originEvent: e })}
      onTouchEnd={(e) => events.touchend({}, { originEvent: e })}
    >
      {children}
    </div>
  );
}

Container.propTypes = {
  className: PropTypes.string,
  children: PropTypes.any,
  title: PropTypes.string,
  events: PropTypes.objectOf(PropTypes.func),
  id: PropTypes.string,
  style: PropTypes.object,
};
