"use strict";

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
  return t;
};

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const react_1 = __importDefault(require("react"));

const classnames_1 = __importDefault(require("classnames"));

const Button_1 = require("../../atoms/Button");
/**
 * https://bitbucket.org/skava-admin/skreact/commits/c756fee64c789215d21f30f23e6e9a67ecd94ba4
 * ^ side effects of scoping this to a global tag when it wasn't needed
 */


const ButtonAdapter = props => {
  const {
    isActive,
    isDisabled,
    className
  } = props,
        remaining = __rest(props, ["isActive", "isDisabled", "className"]);

  const computedClassName = classnames_1.default({
    className,
    title: true,
    down: isActive,
    disable: isDisabled
  });
  return react_1.default.createElement(Button_1.Button, Object.assign({
    className: computedClassName
  }, remaining));
};

const StyledTitleButton = styled.withComponent(ButtonAdapter)`
  @font (13, semi);
  cursor: pointer;
  color: $colors-black;
  text-transform: uppercase;
  margin-bottom: 0;
  padding: $spacing;
  display: flex;
  align-items: center;
  width: 100%;
`;
exports.StyledTitleButton = StyledTitleButton;
const collapse = styled.mixin`
  .collapse,
  .collapsing {
    transition: max-height 0.6s;
    overflow: hidden;

    .inner {
      background-color: $colors-white;
      color: $colors-body-text;
      padding: $spacing;
    }

    .title {
      color: $colors-secondary;
      text-transform: uppercase;
      font-weight: bold;
      margin: 0;
    }

    &.hide {
      /* display: none; */
    }
  }

  &.closed {
    .collapse {
      max-height: 0 !important;
      /* pointer-events: none; */
    }
  }

  .collapse {
    /* display: none; */

    /* max-height: 0; */
    /* overflow: hidden; */

    &.show {
      pointer-events: all;
      /* display: block; */
      /* overflow: auto; */

      /* @james @fixme @todo */
      /* max-height: 1000px; */
    }
  }
`;
const merged = styled.todo`
  border-top: $border-thin;

  ${collapse};
`;
const AccordionContainer = styled.div.attrs({
  className: props => props.classList
})`
  opacity: ${props => props.isDisabled ? '0.5' : '1'};
  display: flex;
  flex-direction: column;
`;
exports.AccordionContainer = AccordionContainer;
const StyledAccordionWrap = styled.div.attrs({
  className: props => {
    const {
      isDisabled,
      isActive,
      className
    } = props;
    const config = {
      'accordion-block': true,
      'open': isActive,
      'closed': !isActive
    };
    const boxClassName = classnames_1.default(config, className);
    return boxClassName;
  }
})`
  &.open .arrow {
    transform: rotate(-180deg);
  }
  &.show .arrow {
    transform: rotate(180deg);
  }
`;
exports.StyledAccordionWrap = StyledAccordionWrap;
const ArrowWrap = styled.span.className('arrow')`
  margin-left: auto;
`;
exports.ArrowWrap = ArrowWrap;
const Title = styled.span.className('text').attrs({
  role: 'heading'
})`
  background: $colors-white;
`;
exports.Title = Title;

const Box = props => react_1.default.createElement("div", Object.assign({
  className: "inner"
}, props));

exports.Box = Box;
exports.default = AccordionContainer; //# sourceMappingURL=_elements.js.map