"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ImageSelect = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _checkoutVoucher = require("../../checkoutVoucher.context");

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3;

var ImageSelect = function ImageSelect() {
  var _useVoucherStyle = (0, _checkoutVoucher.useVoucherStyle)(),
      styleList = _useVoucherStyle.styleList,
      selectedStyle = _useVoucherStyle.selectedStyle,
      updateStyle = _useVoucherStyle.updateStyle;

  var hasStyles = Boolean(styleList.length);

  var handleClick = function handleClick(style) {
    return function () {
      return updateStyle(style);
    };
  };

  if (!hasStyles) return null;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Flex, null, styleList.map(function (style) {
    var isSelected = style.id === selectedStyle.id;
    return /*#__PURE__*/_react["default"].createElement(Option, {
      onClick: !isSelected ? handleClick(style) : undefined,
      isSelected: isSelected,
      key: "Style__" + style.id
    }, /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
      background: "transparent",
      src: style.smallImage,
      width: 500,
      height: 500
    }));
  })));
};

exports.ImageSelect = ImageSelect;

var Flex = _styledComponents["default"].div.attrs({
  className: 'row row-cols-5 g-1'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Option = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n\n  & img {\n    border: 0.1rem solid\n      ", ";\n    transition: opacity 0.1s ease-in-out;\n\n    border-radius: 0.6rem;\n  }\n\n  &:hover > img {\n    opacity: ", ";\n  }\n"])), function (props) {
  return props.isSelected ? props.theme.palette.primary : 'transparent';
}, function (props) {
  return props.isSelected ? "1" : '0.6';
});
//# sourceMappingURL=index.js.map