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

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

import React from 'react';
import { useCheckoutPickupFromStore, useUIFunctions, useStrings, useConfigState, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { AnimatedModal, Button } from '../../';
import styled from 'styled-components';
export var PickUpFromStore = (_ref) => {
  var {
    selectedStore
  } = _ref;
  var [selectedStoreIndex, setSelectedStoreIndex] = React.useState();
  var {
    availableStores
  } = useCheckoutPickupFromStore();

  var onApplyClick = close => {
    var _availableStores$sele;

    selectedStoreIndex !== undefined && (availableStores == null ? void 0 : (_availableStores$sele = availableStores[selectedStoreIndex]) == null ? void 0 : _availableStores$sele.selectStore());
    close();
  };

  var labels = useStrings('checkout');
  var {
    buttons
  } = useGlobalLabels();

  var handleStoreClick = index => () => {
    var _availableStores$inde;

    setSelectedStoreIndex(index);
    availableStores == null ? void 0 : (_availableStores$inde = availableStores[index]) == null ? void 0 : _availableStores$inde.selectStore();
    closeModal();
  };

  var {
    closeViewById
  } = useUIFunctions();
  var {
    views
  } = useConfigState();

  var closeModal = () => {
    setSelectedStoreIndex(undefined);
    closeViewById(views.storePickUp);
  };

  return /*#__PURE__*/React.createElement(AnimatedModal, {
    isRoot: true,
    onClose: closeModal,
    title: labels.selectStore,
    bottom: data => {
      return /*#__PURE__*/React.createElement(ButtonsContainer, null, /*#__PURE__*/React.createElement(Button, {
        type: "button",
        bordered: true,
        onClick: data.closeModal
      }, labels.cancelLabel), /*#__PURE__*/React.createElement(Button, {
        type: "button",
        onClick: () => onApplyClick(data.closeModal)
      }, buttons.apply));
    }
  }, availableStores == null ? void 0 : availableStores.map((store, i) => {
    var {
      address,
      name
    } = store;
    var isSelected = selectedStore === i;
    return /*#__PURE__*/React.createElement(ContainerWrapper, {
      isSelected: isSelected,
      onClick: handleStoreClick(i),
      tabIndex: 0,
      key: store._id
    }, /*#__PURE__*/React.createElement(Radio, {
      isSelected: isSelected
    }), /*#__PURE__*/React.createElement(StoreContainer, null, /*#__PURE__*/React.createElement(StoreWrapper, {
      isUpper: true
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StoreName, {
      isSelected: isSelected
    }, name))), /*#__PURE__*/React.createElement(StoreWrapper, null, /*#__PURE__*/React.createElement(AvailabilityContainer, null, /*#__PURE__*/React.createElement(StockSpan, {
      inStock: true
    }), /*#__PURE__*/React.createElement(StockSpanLabel, null, address.additionalAddressInfo)))));
  }));
};
var ButtonsContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject || (_templateObject = _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'
})(_templateObject2 || (_templateObject2 = _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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, props => props.isSelected ? props.theme.palette.primary : props.theme.palette.secondary);
var StoreContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n"])));
var ContainerWrapper = styled.div.attrs({
  className: 'd-flex align-items-start justify-content-start'
})(_templateObject4 || (_templateObject4 = _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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, props => props.noPadding ? '1.25rem 0' : '1.25rem 3rem', props => props.isSelected ? 1 : 0.6);
var StoreWrapper = styled.div(_templateObject5 || (_templateObject5 = _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(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 1.7rem;\n  line-height: 1.5rem;\n  font-weight: ", ";\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, props => props.isSelected ? 'bold' : '400');
var AvailabilityContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
var StockSpan = styled.div(_templateObject8 || (_templateObject8 = _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"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}, props => props.inStock && "\n  background-color: #0a8a00;\n  ");
var StockSpanLabel = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  padding: 0.1rem 0.5rem 0;\n  font-size: 1rem;\n"])));
//# sourceMappingURL=index.js.map