import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";

var _templateObject, _templateObject2;

import React, { useState } from 'react';
import styled from 'styled-components';
import { Button } from '../Button';
import { Loader } from '../Loader';
import { useCheckoutDiscountCode, useConfigState, useLocalLabels } from '@sentecacommerce-theme/lib';
import { TextInput } from '../TextInput';
import { ErrorMessage } from './Components';
import { IconDanger } from '../Icons';
export var PromoCode = (_ref) => {
  var {
    stringsDomain = 'promoCode'
  } = _ref;
  var [isLoading, setIsLoading] = useState(false);
  var [value, setValue] = useState('');
  var [error, setError] = useState('');

  var _useLocalLabels = useLocalLabels(),
      {
    promoCodeBoxTitle: title,
    promoCodeDefaultErrorMessage: defaultErrorMessage,
    promoCodeSubmitLabel: submitLabel
  } = _useLocalLabels,
      errorsMap = _objectWithoutPropertiesLoose(_useLocalLabels, ["promoCodeBoxTitle", "promoCodeDefaultErrorMessage", "promoCodeSubmitLabel", "promoCodeInputPlaceholder"]);

  var onAddCallback = () => {
    setValue('');
    setIsLoading(false);
  };

  var onAddError = code => {
    setError(errorsMap['CodeError' + code.status] || defaultErrorMessage);
    setIsLoading(false);
  };

  var {
    handleDiscountCodeAdd: addCode
  } = useCheckoutDiscountCode(onAddCallback, onAddError);

  var onChange = e => {
    setError('');
    setValue(e.target.value);
  };

  var onSubmit = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(function* (e) {
      e == null ? void 0 : e.preventDefault();
      setIsLoading(true);
      addCode({
        code: value
      });
    });

    return function onSubmit(_x) {
      return _ref2.apply(this, arguments);
    };
  }();

  var handleKeyPress = e => {
    if (e.key === 'Enter') {
      e.preventDefault();
      value && onSubmit();
    }
  };

  var {
    theme
  } = useConfigState();

  var getButtonContent = () => {
    if (isLoading) {
      return /*#__PURE__*/React.createElement(Loader, {
        width: "2.2rem",
        height: "2.2rem",
        stroke: theme.palette.secondary
      });
    }

    return submitLabel;
  };

  return /*#__PURE__*/React.createElement(Form, null, error && /*#__PURE__*/React.createElement(ErrorMessage, {
    error: error
  }), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(TextInput, {
    label: title,
    value: value,
    id: "PromoCode__" + stringsDomain,
    onChange: onChange,
    name: "PromoCode__" + stringsDomain,
    inputSize: "normal",
    isRequired: false,
    onKeyPress: handleKeyPress
  }), Boolean(value) && /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    fullWidth: true,
    borderRadius: "normal",
    className: "d-flex ml-3 align-items-center justify-content-center",
    style: {
      maxWidth: '12rem'
    },
    disabled: Boolean(error) || isLoading,
    type: "button",
    bordered: true,
    onClick: onSubmit
  }, Boolean(error) ? /*#__PURE__*/React.createElement(IconDanger, {
    style: {
      width: '2.4rem'
    }
  }) : getButtonContent())));
};
var Form = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n\n  & input {\n    border-radius: 0;\n    border-color: ", ";\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var Flex = styled.div.attrs({
  className: 'd-flex justify-content-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map