"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Tr = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _ChevronDownIcon = _interopRequireDefault(require("mdi-react/ChevronDownIcon"));

var _react = _interopRequireDefault(require("react"));

var _Box = require("../../../Box");

var _Button = require("../../../Button");

var _Collapse = require("../../../Collapse");

var _Flex = require("../../../Flex");

var _ThemeProvider = require("../../../ThemeProvider");

var _styles = _interopRequireDefault(require("../../styles"));

var _Td = require("../Td");

var __jsx = _react["default"].createElement;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var Tr = function Tr(props) {
  var _useTheme = (0, _ThemeProvider.useTheme)(),
      colors = _useTheme.colors;

  var expandedContent = props.expandedContent,
      asComponent = props.asComponent;

  var _useTableStyle = (0, _styles["default"])({
    expandedContent: expandedContent
  }),
      rowStyleProps = _useTableStyle.row;

  var _React$useState = _react["default"].useState(false),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      expanded = _React$useState2[0],
      setExpanded = _React$useState2[1];

  var handleExpand = function handleExpand() {
    return setExpanded(!expanded);
  };

  var RowComponent = !asComponent ? _Box.Box : asComponent;
  var rowProps = asComponent ? {} : {
    as: 'tr'
  };
  return __jsx(_react["default"].Fragment, null, __jsx(RowComponent, (0, _extends2["default"])({
    style: // needed to apply styles to motion component while keeping correct table structure
    asComponent && _objectSpread(_objectSpread(_objectSpread({}, rowStyleProps), props), {}, {
      borderColor: colors.border
    })
  }, rowProps, rowStyleProps, props, {
    flexDirection: "column"
  }), __jsx(_Box.Box, (0, _extends2["default"])({}, rowStyleProps, expandedContent ? {
    onClick: handleExpand,
    cursor: 'pointer'
  } : {}), props.children, expandedContent && __jsx(_Td.Td, {
    flex: 0,
    pr: 0
  }, __jsx(_Flex.Flex, {
    align: "center",
    pr: "spacing",
    h: "100%"
  }, __jsx(_Button.Button, {
    onClick: handleExpand,
    size: "sm",
    variant: "unstyled",
    leftIcon: function leftIcon() {
      return __jsx(_Box.Box, {
        transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
        transition: "0.2s",
        willChange: "rotate"
      }, __jsx(_ChevronDownIcon["default"], null));
    },
    color: "faintText",
    iconOnly: true
  })))), __jsx(ExpandedRow, (0, _extends2["default"])({
    expanded: expanded
  }, props))));
};

exports.Tr = Tr;

var ExpandedRow = function ExpandedRow(props) {
  var expandedContent = props.expandedContent,
      expanded = props.expanded;

  var _useTableStyle2 = (0, _styles["default"])({}),
      expandedRowStyleProps = _useTableStyle2.expandedRow;

  if (!expandedContent || !expanded) {
    return null;
  }

  return __jsx(_Flex.Flex, (0, _extends2["default"])({}, expandedRowStyleProps, props, {
    expandedContent: null,
    borderBottomWidth: expanded ? 1 : 0,
    borderColor: "border"
  }), __jsx(_Td.Td, {
    py: 0
  }, __jsx(_Collapse.Collapse, {
    my: "spacing",
    isOpen: expanded
  }, expandedContent)));
};
//# sourceMappingURL=Tr.js.map