import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { DeliveryInstruction as DeliveryInstructionPlaceholder } from 'abstractions/Checkout/DeliveryInstruction'
import { ExpandableState } from 'organisms/ExpandableCard'
import {
  defaultRenderToggleButton,
  defaultRenderExpandedView,
} from './renderProps'
import { DeliveryInstructionProps } from './typings'

@observer
class DeliveryInstruction extends React.Component<
  DeliveryInstructionProps
  > {
  static defaultProps = {
    className: '',
    isSelected: false,
    renderToggleButton: defaultRenderToggleButton,
    renderExpandedView: defaultRenderExpandedView,
  }

  observableState = new ExpandableState()

  componentWillMount() {
    const {  isSelected } = this.props
    if(isSelected === true) {
      this.observableState.handleToggle()
    }
  }
  render() {
    const {
      renderToggleButton,
      renderExpandedView,
      ...remainingProps
    } = this.props
    return (
      <DeliveryInstructionPlaceholder
        renderExpandedView={renderExpandedView}
        renderToggleButton={renderToggleButton}
        state={this.observableState}
        {...remainingProps}
      />
    )
  }
}

export { DeliveryInstruction }
export default DeliveryInstruction