import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isSafe, isFunction, isArray, isObj } from 'exotic'
import { omit } from '@skava/utils'
import { ObserverForm, FormState } from 'src/forms'
import { wording } from 'src/words'
import { Empty } from 'atoms/Empty'
import { MyProfileInputList } from '../fixture'
import { StyledButton } from '../styled'
import {
  MyProfileForm,
  Heading,
  HeaderWrapper,
  UserIdentifierWrapper,
  UserIdentifierText,
  UserIdentifierValue,
} from './styled'

class FormStateCard extends FormState {
  inputsList = MyProfileInputList
}

const SubmitButton = props => {
  const passThroughProps = omit(props, ['children'])
  return (
    <StyledButton
      text={wording.saveChanges}
      {...passThroughProps}
      data-qa={'qa-save-changes'}
    />
  )
}

const fields = ['firstName', 'lastName', 'email', 'phoneNumber']

@observer
class FormCard extends ObserverForm {
  SubmitButton = SubmitButton

  constructor(props) {
    super(props)
    this.state = new FormStateCard()
  }

  doPreFillForm(props, state) {
    const { item, shouldDisablePropsList } = props
    const toList = state => isArray(state.inputsList) && state.inputsList
    const list = toList(state)
    list.map(inputState => {
      fields.map(fieldName => {
        if (
          isSafe(item[fieldName]) &&
          inputState.name === fieldName &&
          inputState.value !== item[fieldName]
        ) {
          inputState.setValue(item[fieldName])
        }
        inputState.isDisabled =
          isArray(shouldDisablePropsList) &&
          shouldDisablePropsList.includes(inputState.name)
      })
    })
  }
  componentDidMount() {
    this.doPreFillForm(this.props, this.state)
  }
  componentWillReceiveProps() {
    this.doPreFillForm(this.props, this.state)
  }

  componentWillMount() {
    const { isB2C } = this.props
    if (isSafe(isB2C) && isB2C === true) {
      const phoneNumberState = this.state.get('phoneNumber')
      if (isObj(phoneNumberState)) {
        phoneNumberState.isHidden = true
      }
    }
  }

  /* onInputInit(inputState) {
    const { item, shouldDisablePropsList } = this.props
    fields.map(fieldName => {
      if (
        isObj(item) &&
        isSafe(item[fieldName]) &&
        inputState.name === fieldName &&
        inputState.value !== item[fieldName]
      ) {
        inputState.setValue(item[fieldName])
      }
      inputState.isDisabled =
        isArray(shouldDisablePropsList) &&
        shouldDisablePropsList.includes(inputState.name)
    })
  } */

  handleSubmit = (event: Event) => {
    const { onSaveChanges } = this.props
    event.preventDefault()
    console.log('[My Profile Form] serialized', this.state.toSerialized())
    if (this.validateForm()) {
      if (isFunction(onSaveChanges)) {
        onSaveChanges(this.state)
      }
    }
  }
}

class MyProfile extends React.PureComponent {
  render() {
    const { item } = this.props

    return (
      <MyProfileForm>
        <HeaderWrapper>
          <Heading breedType="h2" content={wording.myProfileLabel} />
          {isObj(item) && isSafe(item.identifier) ? (
            <UserIdentifierWrapper>
              <UserIdentifierText>{`${
                wording.identifierLabel
              }:`}</UserIdentifierText>
              <UserIdentifierValue>{item.identifier}</UserIdentifierValue>
            </UserIdentifierWrapper>
          ) : (
            <Empty />
          )}
        </HeaderWrapper>
        <FormCard {...this.props} />
      </MyProfileForm>
    )
  }
}

export { MyProfile }
export default MyProfile