import React from 'react';
import styled from 'styled-components';
import { isElement, isFunction } from '../../../../../common/utils';
import { Flexbox, LabeledValue } from '../../../../..';
import { TextWrapper } from './TextWrapper';
import { getStylesForSizes } from '../../../shared';
var getHiddenStylesDesktop = function getHiddenStylesDesktop(_ref) {
  var hidden = _ref.hidden;
  return hidden === true ? 'display: none;' : 'display: list-item;';
};
var getHiddenStylesMobile = function getHiddenStylesMobile(_ref2) {
  var hidden = _ref2.hidden;
  return hidden === true ? 'display: none;' : 'display: flex;';
};
var StyledOverflowItem = styled(Flexbox).withConfig({
  displayName: "ExpandItem__StyledOverflowItem",
  componentId: "sc-1rlkvny-0"
})(["overflow:hidden;text-align:", ";"], function (_ref3) {
  var _ref3$textAlign = _ref3.textAlign,
    textAlign = _ref3$textAlign === void 0 ? 'left' : _ref3$textAlign;
  return textAlign;
});
var StyledDesktopItem = styled(Flexbox).withConfig({
  displayName: "ExpandItem__StyledDesktopItem",
  componentId: "sc-1rlkvny-1"
})(["max-width:", "px;padding-bottom:", "px;", ""], function (p) {
  return p.theme.spacing.unit(75);
}, function (p) {
  return p.theme.spacing.unit(5);
}, getStylesForSizes(function (p) {
  return {
    xs: p.$xs,
    sm: p.$sm,
    md: p.$md,
    lg: p.$lg,
    xl: p.$xl
  };
}, {
  hidden: getHiddenStylesDesktop
}));
var StyledMobileItem = styled(Flexbox).withConfig({
  displayName: "ExpandItem__StyledMobileItem",
  componentId: "sc-1rlkvny-2"
})(["", ""], getStylesForSizes(function (p) {
  return {
    xs: p.$xs,
    sm: p.$sm,
    md: p.$md,
    lg: p.$lg,
    xl: p.$xl
  };
}, {
  hidden: getHiddenStylesMobile
}));
var ExpandRenderer = function ExpandRenderer(_ref4) {
  var _ref4$isLabel = _ref4.isLabel,
    isLabel = _ref4$isLabel === void 0 ? false : _ref4$isLabel,
    children = _ref4.children;
  return React.createElement(React.Fragment, null, isElement(children) && children, isFunction(children) ? children() : !isElement(children) && React.createElement(TextWrapper, {
    isLabel: isLabel
  }, children));
};
var MobileItem = function MobileItem(_ref5) {
  var label = _ref5.label,
    value = _ref5.value,
    xs = _ref5.xs,
    sm = _ref5.sm,
    md = _ref5.md,
    lg = _ref5.lg,
    xl = _ref5.xl;
  return React.createElement(StyledMobileItem, {
    forwardedAs: "li",
    container: true,
    justifyContent: "space-between",
    $xs: xs,
    $sm: sm,
    $md: md,
    $lg: lg,
    $xl: xl
  }, React.createElement(StyledOverflowItem, {
    item: true,
    flex: "0 0 50%"
  }, React.createElement(ExpandRenderer, {
    isLabel: true
  }, label)), React.createElement(StyledOverflowItem, {
    item: true,
    flex: "0 0 50%",
    textAlign: "right"
  }, React.createElement(ExpandRenderer, null, value)));
};
var DesktopItem = function DesktopItem(_ref6) {
  var label = _ref6.label,
    value = _ref6.value,
    xs = _ref6.xs,
    sm = _ref6.sm,
    md = _ref6.md,
    lg = _ref6.lg,
    xl = _ref6.xl;
  return React.createElement(StyledDesktopItem, {
    item: true,
    $xs: xs,
    $sm: sm,
    $md: md,
    $lg: lg,
    $xl: xl,
    forwardedAs: "li"
  }, React.createElement(LabeledValue, {
    label: React.createElement(ExpandRenderer, {
      isLabel: true
    }, label)
  }, React.createElement(ExpandRenderer, null, value)));
};
export var ExpandItem = function ExpandItem(_ref7) {
  var item = _ref7.item,
    mobileItem = _ref7.mobileItem;
  var label = item.label,
    value = item.value,
    hidden = item.hidden,
    sm = item.sm,
    md = item.md,
    lg = item.lg,
    xl = item.xl;
  return mobileItem ? React.createElement(MobileItem, {
    label: label,
    value: value,
    xs: {
      hidden: hidden
    },
    sm: sm,
    md: md,
    lg: lg,
    xl: xl
  }) : React.createElement(DesktopItem, {
    label: label,
    value: value,
    xs: {
      hidden: hidden
    },
    sm: sm,
    md: md,
    lg: lg,
    xl: xl
  });
};
ExpandItem.TextWrapper = TextWrapper;