"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