import React, { createContext, useContext } from 'react';
import { myCartApi, KeyReferenceDTOResourceTypeEnum, useStrings } from '@sentecacommerce-theme/lib';
import { useForm, useWatch } from 'react-hook-form';
var CheckoutVoucherContext = /*#__PURE__*/createContext({});
export var CheckoutVoucherContextProvider = props => {
  var {
    defaultSelectedStyle,
    defaultSelectedCardId,
    cardStyles,
    children,
    cards
  } = props;
  var labels = useStrings('checkoutVoucher');
  var [mutate] = myCartApi.useAddCustom();
  var {
    control,
    errors,
    setValue,
    register,
    handleSubmit
  } = useForm({
    defaultValues: {
      style: defaultSelectedStyle,
      cardId: '',
      firstName: '',
      lastName: '',
      email: '',
      additionalInfo: ''
    }
  });

  var onSubmit = data => {
    var _data$cardId;

    var recipientData = {
      email: data == null ? void 0 : data.email,
      firstName: data == null ? void 0 : data.firstName,
      lastName: data == null ? void 0 : data.lastName
    };
    var centAmount = Number(data == null ? void 0 : data.cardId) || Number(data == null ? void 0 : data.customAmount) || 0;
    mutate({
      name: [{
        lang: 'bg',
        value: labels.title
      }],
      money: {
        centAmount: centAmount * 100,
        currencyCode: 'BGN',
        fractionDigits: 2
      },
      quantity: 1,
      slug: 'checkout-voucher',
      taxCategory: {
        resourceKey: 'vouchers',
        resourceType: KeyReferenceDTOResourceTypeEnum.TaxCategory
      },
      fields: {
        productId: 'online-gift-card',
        variantId: (_data$cardId = data == null ? void 0 : data.cardId) != null ? _data$cardId : data.customAmount,
        image: {
          thumbnail: data.style.smallImage,
          original: data.style.image
        },
        quantity: 1,
        recipientData,
        additionalInfo: data == null ? void 0 : data.additionalInfo
      }
    });
    setValue('customAmount', '');
    setValue('cardId', '');
    setValue('firstName', '');
    setValue('lastName', '');
    setValue('additionalInfo', '');
    setValue('email', '');
  };

  var handleFormSubmit = handleSubmit(onSubmit);
  register('cardId', {
    required: false
  });
  var cardId = useWatch({
    control,
    name: 'cardId',
    defaultValue: defaultSelectedCardId
  });
  register('customAmount', {
    required: false
  });
  var customAmount = useWatch({
    control,
    name: 'customAmount',
    defaultValue: undefined
  });
  register('style', {
    required: true
  });
  var style = useWatch({
    control,
    name: 'style',
    defaultValue: defaultSelectedStyle
  });

  var updateStyle = s => {
    setValue('style', s);
  };

  var updateCard = id => {
    setValue('cardId', id);
    setValue('customAmount', '');
  };

  var updateCustomAmount = value => {
    setValue('cardId', '');
    setValue('customAmount', value);
  };

  return /*#__PURE__*/React.createElement(CheckoutVoucherContext.Provider, {
    value: {
      style,
      updateStyle,
      cardStyles,
      formControl: control,
      errors,
      cardId,
      cards,
      customAmount,
      updateCard,
      updateCustomAmount,
      handleFormSubmit
    }
  }, children);
};
export var useVoucherStyle = () => {
  var data = useContext(CheckoutVoucherContext);
  return {
    selectedStyle: data.style,
    updateStyle: data.updateStyle,
    styleList: data.cardStyles
  };
};
export var useCardsContext = () => {
  return useContext(CheckoutVoucherContext);
};
export var useVoucherForm = () => {
  var {
    errors,
    formControl,
    handleFormSubmit
  } = useContext(CheckoutVoucherContext);
  return {
    errors,
    formControl,
    handleFormSubmit
  };
};

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : r & 0x3 | 0x8;
    return v.toString(16);
  });
}
//# sourceMappingURL=checkoutVoucher.context.js.map