"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

var _lib = require("@sentecacommerce-theme/lib");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

var Voucher = function Voucher() {
  var _useState = (0, _react.useState)(false),
      isSelected = _useState[0],
      setIsSelected = _useState[1];

  var toggleIsSelected = function toggleIsSelected() {
    setIsSelected(function (val) {
      return !val;
    });
  };

  var labels = (0, _lib.useLocalLabels)();
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(CheckboxContainer, {
    isChecked: isSelected
  }, /*#__PURE__*/_react["default"].createElement(_Common.Checkbox, {
    isChecked: isSelected,
    onChange: toggleIsSelected,
    label: labels.useGiftCard
  })), isSelected && /*#__PURE__*/_react["default"].createElement(InputContainer, null, /*#__PURE__*/_react["default"].createElement(InputWrapper, null, /*#__PURE__*/_react["default"].createElement(AutosuggestContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Autosuggest, {
    options: [{
      value: '12',
      label: 'Card 12'
    }],
    getValue: function getValue(option) {
      return option.value;
    },
    getLabel: function getLabel(option) {
      return option.label;
    },
    withRemoveIconWhenSelected: true,
    onRemove: function onRemove() {},
    onOptionSelect: function onOptionSelect() {},
    updateOptions: function updateOptions() {},
    selectedOption: undefined,
    disabled: false,
    isFetching: false,
    label: labels.selectGiftCard,
    minLength: 0,
    debounceDelay: 0
  })), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    icon: /*#__PURE__*/_react["default"].createElement(_Common.IconArrowRight, null),
    iconPosition: "right"
  }, labels.applyGiftCard)))));
};

exports.Voucher = Voucher;

var Container = _styledComponents["default"].div.attrs({
  className: 'py-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var CheckboxContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & div {\n    opacity: 1 !important;\n    ", "\n    &:hover {\n      & span {\n        border-color: ", ";\n      }\n    }\n  }\n\n  & span {\n    border-color: ", ";\n  }\n"])), function (props) {
  return props.isChecked ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n            & span {\n              border-color: ", ";\n            }\n          "])), function (_ref) {
    var theme = _ref.theme;
    return theme.palette.primary;
  }) : '';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});

var InputContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 64rem;\n"])));

var InputWrapper = _styledComponents["default"].div.attrs({
  className: 'row row-cols-1 pt-3 pb-2 g-3 gx-4'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > div {\n    min-height: 0;\n  }\n\n  & input {\n    border-radius: 0;\n  }\n"])));

var AutosuggestContainer = _styledComponents["default"].div.attrs({
  className: 'col-12 col-md-7'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ButtonContainer = _styledComponents["default"].div.attrs({
  className: 'col-12 col-md-5'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > button {\n    width: 100%;\n    white-space: nowrap;\n    padding-right: 5.4rem;\n  }\n\n  @media (min-width: ", ") {\n    & > button {\n      max-width: 19.2rem;\n    }\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map