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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;

import React, { useEffect, useState } from 'react';
import { useCheckoutPickupFromStore, useLocalLabels, useCheckoutFormShippingState, useUIFunctions, useCheckoutErrorFields, useConfigState } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { Button, FormError, IconStore } from '../../../../../Common';
import { CheckoutTitle } from '../../../UI';
export var CheckoutPickupFromStore = () => {
  var _selectedStore$addres;

  var [selectedStoreIndex, setSelectedStoreIndex] = useState();
  var {
    enqueueView
  } = useUIFunctions();
  var {
    availableStores
  } = useCheckoutPickupFromStore();
  var {
    errorRef
  } = useCheckoutErrorFields();
  var {
    errors
  } = useCheckoutFormShippingState();
  var labels = useLocalLabels();
  var selectedStore = availableStores && selectedStoreIndex !== undefined ? availableStores[selectedStoreIndex] : availableStores == null ? void 0 : availableStores.find(store => store.isSelected);
  var hasSelectedStore = Boolean(selectedStore);
  useEffect(() => {
    setSelectedStoreIndex(availableStores == null ? void 0 : availableStores.findIndex(store => store.isSelected));
  }, [availableStores]);
  var {
    views
  } = useConfigState();

  var openModal = () => {
    enqueueView(views.storePickUp, {
      selectedStore: selectedStoreIndex
    });
  };

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(CheckoutTitle, {
    data: labels.selectStore
  }), hasSelectedStore && /*#__PURE__*/React.createElement(SelectedStoreContainer, null, /*#__PURE__*/React.createElement(ContainerWrapper, {
    noPadding: true
  }, /*#__PURE__*/React.createElement(IconStore, {
    style: {
      width: '2rem'
    },
    className: "mr-2"
  }), /*#__PURE__*/React.createElement(StoreContainer, null, /*#__PURE__*/React.createElement(StoreWrapper, {
    isUpper: true
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StoreName, null, selectedStore == null ? void 0 : selectedStore.name))), /*#__PURE__*/React.createElement(StoreWrapper, null, /*#__PURE__*/React.createElement(AvailabilityContainer, null, /*#__PURE__*/React.createElement(StockSpan, {
    inStock: true
  }), /*#__PURE__*/React.createElement(StockSpanLabel, null, selectedStore == null ? void 0 : (_selectedStore$addres = selectedStore.address) == null ? void 0 : _selectedStore$addres.additionalAddressInfo)))))), /*#__PURE__*/React.createElement(ButtonContainer, {
    hasSelectedStore: hasSelectedStore
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: openModal,
    icon: !hasSelectedStore ? /*#__PURE__*/React.createElement(IconStore, null) : undefined,
    iconPosition: "right",
    small: hasSelectedStore,
    variant: "primary",
    bordered: hasSelectedStore,
    type: "button"
  }, hasSelectedStore ? labels.changeStoreButtonLabel : labels.selectStoreButtonLabel)), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    errors: errors,
    fieldName: "pickupFromStore"
  }));
};
var SelectedStoreContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var ButtonContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  & > button {\n    width: ", ";\n  }\n"])), props => props.hasSelectedStore ? 'auto' : '24rem');
var ButtonsContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  & > button:first-child {\n    width: calc(37% - 0.6rem);\n    padding: 0 0.8rem !important;\n  }\n\n  & > button:last-child {\n    width: calc(63% - 0.6rem);\n    padding: 0 0.8rem !important;\n  }\n"])));
var Radio = styled.div.attrs({
  className: 'mr-3 mt-1 d-flex align-items-center justify-content-center'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  min-width: 1.4rem;\n  max-width: 1.4rem;\n  height: 1.4rem;\n  border: 0.1rem solid ", ";\n  border-radius: 50%;\n\n  &:after {\n    content: '';\n    display: block;\n    width: 0.8rem;\n    height: 0.8rem;\n    background-color: ", ";\n    border-radius: 50%;\n  }\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.primary;
}, props => props.isSelected ? props.theme.palette.primary : props.theme.palette.secondary);
var ContainerWrapper = styled.div.attrs({
  className: 'd-flex align-items-start justify-content-start'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: ", ";\n  padding: ", ";\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:focus,\n    &:hover {\n      opacity: ", ";\n    }\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
}, props => props.noPadding ? '1.25rem 0' : '1.25rem 3rem', props => props.isSelected ? 1 : 0.6);
var StoreContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n"])));
var StoreWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  justify-content: space-between;\n  display: flex;\n  width: 100%;\n  ", "\n"])), props => props.isUpper && "\n  align-items: center;\n  margin-bottom: 0.25rem;\n  ");
var StoreName = styled.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 1.7rem;\n  line-height: 1.5rem;\n  font-weight: ", ";\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}, props => props.isSelected ? 'bold' : '400');
var AvailabilityContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
var StockSpan = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  min-width: 0.7rem;\n  min-height: 0.7rem;\n  display: inline-flex;\n  border-radius: 50%;\n  margin-top: 0.5625rem;\n  color: ", ";\n\n  ", "\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, props => props.inStock && "\n  background-color: #0a8a00;\n  ");
var StockSpanLabel = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  padding: 0.1rem 0.5rem 0;\n  font-size: 1rem;\n"])));
//# sourceMappingURL=index.js.map