import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

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

import React, { useState } from 'react';
import styled, { css } from 'styled-components';
import { Checkbox, Button, IconArrowRight, Autosuggest } from '../../../../../Common';
import { useLocalLabels } from '@sentecacommerce-theme/lib';
export var Voucher = () => {
  var [isSelected, setIsSelected] = useState(false);

  var toggleIsSelected = () => {
    setIsSelected(val => !val);
  };

  var labels = useLocalLabels();
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(CheckboxContainer, {
    isChecked: isSelected
  }, /*#__PURE__*/React.createElement(Checkbox, {
    isChecked: isSelected,
    onChange: toggleIsSelected,
    label: labels.useGiftCard
  })), isSelected && /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(AutosuggestContainer, null, /*#__PURE__*/React.createElement(Autosuggest, {
    options: [{
      value: '12',
      label: 'Card 12'
    }],
    getValue: option => option.value,
    getLabel: option => option.label,
    withRemoveIconWhenSelected: true,
    onRemove: () => {},
    onOptionSelect: () => {},
    updateOptions: () => {},
    selectedOption: undefined,
    disabled: false,
    isFetching: false,
    label: labels.selectGiftCard,
    minLength: 0,
    debounceDelay: 0
  })), /*#__PURE__*/React.createElement(ButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
    icon: /*#__PURE__*/React.createElement(IconArrowRight, null),
    iconPosition: "right"
  }, labels.applyGiftCard)))));
};
var Container = styled.div.attrs({
  className: 'py-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var CheckboxContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), props => props.isChecked ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n            & span {\n              border-color: ", ";\n            }\n          "])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.primary;
}) : '', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var InputContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  max-width: 64rem;\n"])));
var InputWrapper = styled.div.attrs({
  className: 'row row-cols-1 pt-3 pb-2 g-3 gx-4'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  & > div {\n    min-height: 0;\n  }\n\n  & input {\n    border-radius: 0;\n  }\n"])));
var AutosuggestContainer = styled.div.attrs({
  className: 'col-12 col-md-7'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var ButtonContainer = styled.div.attrs({
  className: 'col-12 col-md-5'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map