"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TapIconButton = exports.IconButton = exports.Button = void 0;

var _preact = require("preact");

var _getStyledComponent = _interopRequireDefault(require("./utils/get-styled-component"));

var _icon = require("./icon");

var _classnames = _interopRequireDefault(require("classnames"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

const preventDefault = e => {
  e.preventDefault();
};

const Button = (0, _getStyledComponent.default)({
  tagName: 'button',
  baseClasses: 'br2 ba',
  options: {
    size: ['tiny', 'large'],
    pressed: ['pressed'],
    variant: ['primary', 'stop', 'disabled']
  },
  defaultProps: {
    onContextMenu: preventDefault
  },
  fn: ({
    tiny,
    large,
    disabled,
    pressed,
    primary,
    stop
  }) => {
    let classes = ['bn']; // handle sizes

    if (tiny) {
      classes.push('pa1');
    } else if (large) {
      classes.push('pa3 fw6');
    } else {
      classes.push('pa2');
    } // if disabled stop here


    if (disabled) {
      classes.push('mid-gray bg-light-gray not-allowed');
      return classes.join(' ');
    } // pointer class


    classes.push('pointer');

    if (pressed) {
      classes.push('shadow-3');
    } else {
      classes.push('shadow-2');
    }

    if (stop) {
      classes.push('white bg-red');
    }

    if (primary) {
      classes.push('dark-blue bg-light-blue');
    }

    if (!stop && !primary) {
      classes.push('dark-blue');

      if (pressed) {
        classes.push('bg-lightest-blue');
      } else {
        classes.push('bg-white');
      }
    }

    return classes.join(' ');
  }
});
exports.Button = Button;

const getDefaultIconSize = props => {
  if (props.large) {
    return 32;
  }

  if (props.tiny) {
    return 14;
  }

  return 16;
};

const IconButton = (_ref) => {
  let {
    icon,
    iconClassName,
    iconSize,
    children
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["icon", "iconClassName", "iconSize", "children"]);

  return (0, _preact.h)(Button, rest, (0, _preact.h)("span", {
    className: "flex items-center"
  }, icon && (0, _preact.h)(_icon.Icon, {
    icon: icon,
    className: (0, _classnames.default)({
      mr1: !rest.large,
      mr2: !!rest.large
    }, iconClassName),
    size: iconSize || getDefaultIconSize(rest)
  }), children));
};

exports.IconButton = IconButton;
const TapIconButton = (0, _getStyledComponent.default)({
  baseClasses: 'button-reset pointer pa0 ma0 bn bg-transparent flex items-center justify-center',
  style: {
    width: '40px',
    height: '40px'
  },
  options: {
    icon: ['icon'],
    color: ['color']
  },
  renderChildren: ({
    icon,
    color
  }) => [(0, _preact.h)(_icon.Icon, {
    key: icon,
    icon: icon,
    color: color,
    size: "28"
  })]
});
exports.TapIconButton = TapIconButton;