import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe, isFunction, isArray, isObj } from 'exotic'
import { omit } from 'uxui-modules/utils/omit'
import { ObserverForm, FormState } from 'src/forms'
import { wording } from 'src/words'
import { smsNotificationInputList } from '../fixture'
import { StyledButton } from '../styled'
import { Heading, Wrapper } from './styled'

class FormStateCard extends FormState {
  inputsList = smsNotificationInputList
}

const formStateCard = new FormStateCard()

class FormButton extends React.PureComponent {
  render() {
    const passThroughProps = omit(this.props, ['children'])
    return (
      <StyledButton
        {...passThroughProps}
        text={wording.saveChanges}
        data-qa={'qa-save-changes'}
      />
    )
  }
}

@observer
class FormCard extends ObserverForm {
  static FormCard = formStateCard
  SubmitButton = FormButton

  static defaultProps = {
    state: formStateCard,
  }

  doPrefillForm(props, state) {
    const { item, shouldDisablePropsList } = props
    const toList = state =>
      isArray(state.inputsList[0].elementList) &&
      state.inputsList[0].elementList
    const list = toList(state)
    list.map(inputState => {
      if (
        isObj(item) && isSafe(item.phoneNumber) &&
        inputState.name === 'phoneNumber' &&
        inputState.value !== item.phoneNumber
      ) {
        inputState.setValue(item.phoneNumber)
      }
      inputState.isDisabled =
        isArray(shouldDisablePropsList) &&
        shouldDisablePropsList.includes(inputState.name)
    })
  }
  componentDidMount() {
    this.doPrefillForm(this.props, this.state)
  }
  componentWillReceiveProps() {
    this.doPrefillForm(this.props, this.state)
  }

  handleSubmit = event => {
    const { onSaveChanges } = this.props
    event.preventDefault()
    console.log('[On save changes] data: ', this.state.toSerialized())
    if (isFunction(onSaveChanges)) {
      onSaveChanges(this.state)
    }
  }
}

class SmsNotifications extends React.PureComponent {
  render() {
    return (
      <Wrapper>
        <Heading breedType="h2" content={wording.smsNotifications} />
        <FormCard {...this.props} />
      </Wrapper>
    )
  }
}

export { SmsNotifications }
export default SmsNotifications