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

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

import React, { useState } from 'react';
import { useSelectedFilters, getTermsAggregationLabel, isColorBright } from '@sentecacommerce-theme/lib';
import { FilterWrapper } from '../FilterWrapper';
import styled, { css } from 'styled-components';
import { IconCheck, Typography } from '../../../../../Common';

var getColor = data => {
  var _data$meta$extra$rgb;

  return ((_data$meta$extra$rgb = data.meta.extra.rgb) == null ? void 0 : _data$meta$extra$rgb.substring(0, 7)) || '#fff';
};

export var ColorFilter = (_ref) => {
  var {
    data
  } = _ref;
  var [isGrid, setIsGrid] = useState(false);
  var selectedFiltersCount = useSelectedFilters(data).length;

  var showAsGrid = () => setIsGrid(true);

  var showAsLine = () => setIsGrid(false);

  return /*#__PURE__*/React.createElement(FilterWrapper, {
    onMobileArrowClick: isGrid ? showAsLine : showAsGrid,
    withMobileArrow: true,
    mobileIconDirection: isGrid ? 'down' : 'right',
    count: selectedFiltersCount,
    filterName: data.name
  }, /*#__PURE__*/React.createElement(Row, {
    isGrid: isGrid
  }, data.items.map((item, index) => {
    var color = getColor(item.data);
    var isLight = isColorBright(color, 200);
    var {
      count
    } = item.data;
    return /*#__PURE__*/React.createElement(Col, {
      isGrid: isGrid,
      key: "Color__" + color + "-" + item.data.key + "--" + index
    }, /*#__PURE__*/React.createElement(Color, {
      isWhite: color.includes('#ffff'),
      onClick: item.onClick,
      colorLabel: item.data,
      style: {
        background: color,
        color: isLight ? '#000' : '#fff'
      }
    }, item.selected && /*#__PURE__*/React.createElement(IconCheck, null)), /*#__PURE__*/React.createElement(ColorLabel, {
      onClick: item.onClick
    }, getTermsAggregationLabel(item), ' ', Boolean(count) && /*#__PURE__*/React.createElement(Count, null, count)));
  })));
};
var Color = styled.button.attrs({
  className: 'p-0'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  min-height: 0 !important;\n  position: relative;\n  border-radius: 0.2rem;\n\n  @media (max-width: ", ") {\n    padding-bottom: 100% !important;\n    height: 0 !important;\n    min-width: 100%;\n    max-width: 100%;\n    box-shadow: rgba(149, 157, 165, 0.2) 0px 0.4rem 1.2rem;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        45deg,\n        rgba(169, 169, 169, 0),\n        rgb(237, 237, 231, 0.2),\n        rgb(255, 255, 249, 0.4)\n      )\n      0% 0% / 100% 100%;\n  }\n\n  & > svg {\n    position: absolute;\n    width: 2.4rem;\n    height: 2.4rem;\n    left: calc(50% - 1.2rem);\n    top: calc(50% - 1.2rem);\n  }\n\n  @media (min-width: ", ") {\n    height: 2rem !important;\n    min-width: 2rem;\n    max-width: 2rem;\n\n    border: ", ";\n\n    & > svg {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n      left: calc(50% - 1rem);\n      top: calc(50% - 1rem);\n    }\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.sm.max;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.min;
}, props => props.isWhite ? "0.2rem solid " + props.theme.palette.light : '0');
var ColorLabel = styled(Typography).attrs({
  className: 'd-flex align-items-center mt-2 mt-md-0 pl-md-2',
  variant: '7',
  color: 'hint'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-size: 1.1rem;\n  font-weight: bold;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  cursor: pointer;\n"])));
var Col = styled.div.attrs({
  className: 'd-md-flex align-items-center pb-md-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    padding: 1.2rem 1.2rem;\n    min-width: max(7.5rem, calc(15% + 2.4rem));\n    max-width: max(7.5rem, calc(15% + 2.4rem));\n    line-height: 0;\n\n    ", "\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.sm.max;
}, props => props.isGrid ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n            min-width: 25%;\n            max-width: 25%;\n          "]))) : '');
var Row = styled.div.attrs(props => ({
  className: "d-flex " + (props.isGrid ? ' flex-wrap ' : '') + " row-md g-4 row-cols-md-2 flex-md-wrap"
}))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    margin-bottom: -0.8rem;\n  }\n  @media (max-width: ", ") {\n    max-width: calc(100% + 2.4rem);\n    overflow-x: scroll;\n    margin: -1.2rem -1.2rem !important;\n    line-height: 0;\n    display: flex;\n    ", "\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.sm.max;
}, props => props.isGrid ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n            flex-wrap: wrap;\n          "]))) : '');
var Count = styled.span.attrs({
  className: 'd-none d-md-flex align-items-center justify-content-center ml-2 px-2'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  min-width: 2.6rem;\n  height: 2rem;\n  font-size: 1rem;\n  color: ", ";\n  font-weight: bold;\n  background-color: ", ";\n  border-radius: 4rem;\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.light;
});
//# sourceMappingURL=index.js.map