import React from 'react'
import { styled } from 'styleh-components'
import toClassName from 'classnames'
import { ButtonAdapter } from './ButtonAdapter'

const StyledTitleButton = styled.withComponent(ButtonAdapter)`
  @font (13, semi);
  cursor: pointer;
  color: var(--color-black);
  text-transform: uppercase;
  margin-bottom: 0;
  padding: $spacing;
  display: flex;
  align-items: center;
  width: 100%;
`

const AccordionContainer = styled.div`
  opacity: ${props => (props.isDisabled ? '0.5' : '1')};
  display: flex;
  flex-direction: column;
`

const StyledAccordionWrap = styled.div.attrs({
  // @todo get rid of
  className: props => {
    const { isDisabled, isActive, className } = props
    return toClassName({
      [className]: !!className,
      'accordion-block': true,
      open: isActive,
      closed: !isActive,
    })
  },
})`
  &.open .arrow {
    transform: rotate(-180deg);
  }
  &.show .arrow {
    transform: rotate(180deg);
  }
`

const Title = styled.span.attrs({ className: 'text', role: 'heading' })`
  background: var(--color-pure-white);
  flex: 2 0 0;
  text-align: left;
`

const TitleSpan = styled.span`
  width: 100%;
  display: flex;
`

const Wrapper = styled.div.attrs({
  className: 'container',
})``

export {
  StyledAccordionWrap,
  AccordionContainer,
  Title,
  TitleSpan,
  StyledTitleButton,
  Wrapper,
}
export default AccordionContainer