import * as React from 'react'
import toClassName from 'classnames'
import { observer } from 'xmobx/mobx-react'
import { isArray } from 'exotic'
import { makeCommonState } from 'src/state'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { AccordionHeader, AccordionTitleProps } from 'molecules/AccordionBlock'
import { StyledAccordionBlock } from './styled'
import { FilterViewProps } from './typings'
import { renderOptionsValue } from './renderProps'
import { SeparateDrop } from '../SeparateDrop'

@observer
export class ProductFilterOptions extends React.Component<FilterViewProps> {
  observableState = makeCommonState()

  defaultRenderIcon = (props: AccordionTitleProps) => {
    const { isActive, onClick } = props
    return (
      <MaterialIcon
        type={isActive ? 'visibility' : 'visibility_off'}
        onClick={onClick}
      />
    )
  }

  defaultRenderWrapper = (props: AccordionTitleProps) => {
    const { isDisabled, isActive, children } = props
    const className = toClassName({
      title: true,
      down: isActive,
      disable: isDisabled,
    })
    return (
      <AccordionHeader
        key="accordion-header"
        className={className}
        aria-expanded={!isActive}
        data-qa={props['data-qa']}
      >
        {children}
      </AccordionHeader>
    )
  }

  renderChildren = () => {
    const { list, id } = this.props
    const { isVisible } = this.observableState
    return (
      <StyledAccordionBlock
        renderWrapper={this.defaultRenderWrapper}
        renderIcon={this.defaultRenderIcon}
        title={list.label}
        id={id}
        state={this.observableState}
        isActive={isVisible}
      >
        {isArray(list.value) && list.value.map(renderOptionsValue)}
      </StyledAccordionBlock>
    )
  }
  render() {
    const { list, id, ...remainingProps } = this.props
    const children = this.renderChildren()
    return <SeparateDrop children={children} {...remainingProps} />
  }
}