function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import styled from 'styled-components';
import FlexTable from '../..';
import { ExpandCell } from '../../Cell/ExpandCell';
import { COLUMN_ID_EXPAND, ICON_COLUMN_DEFAULT_FLEX_PROPS } from '../../shared/constants';
import { useFlexTable } from '../../shared/FlexTableProvider';
import { getStylesForSizes } from '../../shared';
var getExpandableStyles = function getExpandableStyles(_ref) {
  var expandable = _ref.expandable;
  if (expandable) {
    return 'display: flex;';
  }
  return 'display: none;';
};
var getColumnDistanceStyles = function getColumnDistanceStyles(p) {
  return "\n  margin-left: ".concat(p.theme.spacing.unit(-p.columnDistance / 2), "px;\n");
};
var StyledExpandCell = styled(ExpandCell).withConfig({
  displayName: "ExpandElement__StyledExpandCell",
  componentId: "sc-1fxotq-0"
})(["", ";flex:0 ", "px;", "{flex:0 ", "px;}"], getStylesForSizes(function (p) {
  return {
    xs: p.$xs,
    sm: p.$sm,
    md: p.$md,
    lg: p.$lg,
    xl: p.$xl
  };
}, {
  expandable: getExpandableStyles,
  columnDistance: getColumnDistanceStyles
}), function (p) {
  return p.theme.spacing.unit(5);
}, function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
}, function (p) {
  return p.theme.spacing.unit(10);
});
export var ExpandElement = function ExpandElement(_ref2) {
  var rowType = _ref2.rowType,
    _ref2$expanded = _ref2.expanded,
    expanded = _ref2$expanded === void 0 ? false : _ref2$expanded,
    onExpandToggle = _ref2.onExpandToggle,
    setExpand = _ref2.setExpand,
    disabled = _ref2.disabled;
  var _useFlexTable = useFlexTable('expandable', 'columnDistance'),
    xs = _useFlexTable.xs,
    sm = _useFlexTable.sm,
    md = _useFlexTable.md,
    lg = _useFlexTable.lg,
    xl = _useFlexTable.xl;
  var expandProps = rowType === 'content' ? {
    expanded: expanded,
    onClick: function onClick() {
      return onExpandToggle ? onExpandToggle(!expanded) : setExpand(!expanded);
    },
    disabled: disabled
  } : {
    expanded: false,
    as: rowType === 'header' ? FlexTable.Header : FlexTable.Footer,
    onClick: function onClick() {}
  };
  return React.createElement(StyledExpandCell, _extends({
    columnId: COLUMN_ID_EXPAND,
    $xs: xs,
    $sm: sm,
    $md: md,
    $lg: lg,
    $xl: xl
  }, expandProps, ICON_COLUMN_DEFAULT_FLEX_PROPS));
};