import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["inverse"];
import React from 'react';
import Avatar from './Avatar';
import AvatarStack from './AvatarStack';
import avatars from '../../static/data/avatar';
export default {
  component: AvatarStack,
  title: 'AvatarStack'
};

var Wrapper = function Wrapper(_ref) {
  var _ref$inverse = _ref.inverse,
      inverse = _ref$inverse === void 0 ? false : _ref$inverse,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("div", _extends({
    style: {
      padding: '6px',
      marginBottom: '24px',
      backgroundColor: inverse ? 'grey' : 'transparent'
    }
  }, props));
};

export var Main = function Main() {
  return /*#__PURE__*/React.createElement("div", null, ['tiny', 'small', 'medium', 'large', 'hero'].map(function (size) {
    return /*#__PURE__*/React.createElement("div", {
      key: size
    }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(AvatarStack, {
      size: size
    }, /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[0].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[2].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[3].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[4].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[5].image
    }))), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(AvatarStack, {
      size: size,
      displayMax: 4
    }, /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[0].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[2].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[3].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[4].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[5].image
    }))), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(AvatarStack, {
      size: size,
      displayMax: 4,
      selectable: true
    }, /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[0].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[2].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[3].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[4].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[5].image
    }))), /*#__PURE__*/React.createElement(Wrapper, {
      inverse: true
    }, /*#__PURE__*/React.createElement(AvatarStack, {
      size: size,
      displayMax: 4,
      inverse: true
    }, /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[0].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[2].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[3].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[4].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[5].image
    }))), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(AvatarStack, {
      size: size,
      direction: "vertical"
    }, /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[0].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[2].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[3].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[4].image
    }), /*#__PURE__*/React.createElement(Avatar, {
      imageUrl: avatars[5].image
    }))));
  }));
};