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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import { useProductState, useProductFunctions, useConfigState, useLocalLabels, useUIFunctions } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { Button, Typography } from '../../../Common';
import { SizeChartModal } from '../SizeChart';
export var AllSizesList = (_ref) => {
  var _attributeRules$attri, _content$name, _content$description, _allSizes$stateSizeId;

  var {
    stateSizeId,
    setStateSizeId,
    onSelectCallback
  } = _ref;
  var {
    selectedVariant,
    attributeRules,
    metaData
  } = useProductState();
  var {
    attributeKeys,
    views
  } = useConfigState();
  var labels = useLocalLabels();
  var {
    enqueueView
  } = useUIFunctions();
  var {
    selectVariantByCombination,
    getVariantByCombination,
    getCombinationsForAttributeRule
  } = useProductFunctions();
  var [showSizeChart, setSizeChart] = React.useState(false);
  var [content, setContent] = React.useState({});

  var fetchSizeChart = () => {
    var _metaData$rootCategor, _metaData$brand;

    fetch("/hub/size-charts/search?category=" + (metaData == null ? void 0 : (_metaData$rootCategor = metaData.rootCategory) == null ? void 0 : _metaData$rootCategor._id) + "&brand=" + (metaData == null ? void 0 : (_metaData$brand = metaData.brand) == null ? void 0 : _metaData$brand._id), {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
    }).then(data => data.json().then(result => {
      setContent(result);
      setSizeChart(true);
    })).catch(console.error);
  };

  var selectedColor = selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.color);

  var selectVariantBySizeAndColor = (sizeId, colorId) => {
    setStateSizeId(sizeId);
    selectVariantByCombination(sizeId, colorId);
    onSelectCallback == null ? void 0 : onSelectCallback();
  };

  var allSizes = attributeRules == null ? void 0 : (_attributeRules$attri = attributeRules[attributeKeys.size]) == null ? void 0 : _attributeRules$attri.values;
  var unavailableSizes = Object.keys(allSizes).filter(size => {
    var _getVariantByCombinat;

    var isAvailable = (_getVariantByCombinat = getVariantByCombination(size, selectedColor == null ? void 0 : selectedColor.id)) == null ? void 0 : _getVariantByCombinat.isAvailable;
    return !isAvailable;
  });
  var allPossibleSizesForSelectedColor = getCombinationsForAttributeRule(attributeKeys.color, selectedColor == null ? void 0 : selectedColor.id);
  React.useEffect(() => {
    stateSizeId && selectVariantBySizeAndColor(stateSizeId, selectedColor == null ? void 0 : selectedColor.id);
  }, [stateSizeId]);
  if (!allSizes) return null;
  var sortedSizes = Object.keys(allSizes).sort((a, b) => allSizes[a].extra.sort - allSizes[b].extra.sort);
  return /*#__PURE__*/React.createElement(React.Fragment, null, showSizeChart && /*#__PURE__*/React.createElement(SizeChartModal, {
    title: content == null ? void 0 : (_content$name = content.name) == null ? void 0 : _content$name[0].value,
    open: showSizeChart,
    html: content == null ? void 0 : (_content$description = content.description) == null ? void 0 : _content$description[0].value,
    handleClose: () => setSizeChart(false)
  }), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(SizeLabelContainer, null, /*#__PURE__*/React.createElement("span", null, labels.selectedSize, ' ', /*#__PURE__*/React.createElement("strong", null, (_allSizes$stateSizeId = allSizes[stateSizeId]) == null ? void 0 : _allSizes$stateSizeId.label)), /*#__PURE__*/React.createElement("span", {
    style: {
      cursor: 'pointer',
      textDecoration: 'underline',
      userSelect: 'none'
    },
    onClick: () => fetchSizeChart()
  }, labels.sizeChart)), /*#__PURE__*/React.createElement(OptionList, null, sortedSizes.map(sizeId => {
    var _getVariantByCombinat2;

    var currentSize = allSizes[sizeId];
    var isSelected = stateSizeId === sizeId;
    var isAvailable = (_getVariantByCombinat2 = getVariantByCombination(sizeId, selectedColor == null ? void 0 : selectedColor.id)) == null ? void 0 : _getVariantByCombinat2.isAvailable;
    return /*#__PURE__*/React.createElement(OptionListItem, {
      key: sizeId + "__" + isSelected,
      disabled: !isAvailable
    }, /*#__PURE__*/React.createElement(Button, {
      variant: isSelected ? 'primary' : 'light',
      bordered: !isSelected,
      fullWidth: true,
      disabled: !isAvailable,
      withCrossOver: true,
      type: "button",
      onClick: () => selectVariantBySizeAndColor(sizeId, selectedColor == null ? void 0 : selectedColor.id)
    }, currentSize.label));
  })), Boolean(unavailableSizes.length) && /*#__PURE__*/React.createElement(SubForRestock, {
    onClick: () => enqueueView(views.subForProduct, {
      selectedVariant: selectedVariant,
      sizes: allSizes,
      setStateSizeId: setStateSizeId,
      unavailableSizes
    })
  }, labels.restock)));
};
var SizeLabelContainer = styled.div.attrs({
  className: 'd-flex mb-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-transform: uppercase;\n  font-size: 13px;\n  line-height: 20px;\n\n  & span:last-of-type {\n    margin-left: auto;\n    color: ", ";\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var OptionList = styled.ul.attrs({
  className: 'row row-cols-md-6 row-cols-5 g-2 mb-4'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var OptionListItem = styled.li.attrs({
  className: ''
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  & button {\n    padding: 0 !important;\n  }\n  ", "\n\n  @media (max-width: ", ") {\n    & button:hover {\n      background: ", " !important;\n      border-color: ", " !important;\n    }\n  }\n"])), props => props.disabled && "\n      opacity: 0.5;\n      border: none;\n      & button{\n        pointer-events: none;\n        cursor: not-allowed;\n      }\n    ", (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.max;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
});
var SubForRestock = styled(Typography).attrs({
  variant: '5',
  className: 'mb-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  cursor: pointer;\n  margin-top: 0.6rem;\n  color: ", ";\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map