import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { omit } from '@skava/utils'
import { NO_OP } from 'exotic'
import { SingleShipping as SingleShippingPlaceholder } from 'abstractions/Checkout/RegisteredUser/SingleCartProduct'
import { SingleShippingProps, SingleShippingState } from './typings'
import {
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultHandleToggleChange,
  defaultHandleFormBlur,
} from './renderProps'
import { SingleShippingInstance } from './state'

@observer
class SingleShipping extends React.Component<
  SingleShippingProps,
  SingleShippingState
> {
  static defaultProps = {
    className: '',
    buttonDataQa: 'qa-change-shipping',
    // renderProps
    renderHeaderView: defaultRenderHeaderView,
    renderExpandableView: defaultRenderExpandableView,
    // handler
    onShippingAddressChange: NO_OP,
    onViewToggle: NO_OP,
  }

  observableState: SingleShippingInstance = new SingleShippingInstance()

  componentWillMount() {
    const { address } = this.props
    this.observableState.setShippingAddress(address)
  }

  componentWillReceiveProps(nextProps) {
    const { address } = nextProps
    this.observableState.setShippingAddress(address)
  }

  render() {
    // const { ...remainingProps } = this.props
    const passThroughProps = omit(this.props, ['address'])
    
    return (
      <SingleShippingPlaceholder
        isRegisteredUser={true}
        handleToggleChange={defaultHandleToggleChange}
        handleFormBlur={defaultHandleFormBlur}
        state={this.observableState}
        {...passThroughProps}
      />
    )
  }
}

export { SingleShipping }
export default SingleShipping