import React from 'react'
import toClassName from 'classnames'
import { Button } from '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, ...remaining } = props
  const computedClassName = toClassName({
    className,
    title: true,
    down: isActive,
    disable: isDisabled,
  })
  return <Button 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%;
`

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;
`

const StyledAccordionWrap = styled.div.attrs({
  className: props => {
    const { isDisabled, isActive, className } = props

    const config = {
      'accordion-block': true,
      'open': isActive,
      'closed': !isActive,
    }

    const boxClassName = toClassName(config, className)
    return boxClassName
  },
}) `
  &.open .arrow {
    transform: rotate(-180deg);
  }
  &.show .arrow {
    transform: rotate(180deg);
  }
`

const ArrowWrap = styled.span.className('arrow') `
  margin-left: auto;
`
const Title = styled.span.className('text').attrs({ role: 'heading' }) `
  background: $colors-white;
`

const Box = props => <div className="inner" {...props} />

export {
  StyledAccordionWrap,
  AccordionContainer,
  Title,
  ArrowWrap,
  StyledTitleButton,
  Box,
}
export default AccordionContainer