import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { omit } from '@skava/utils'
import { isFunction } from 'exotic'
import { ObserverForm, FormState } from 'src/forms'
import { wording } from 'src/words'
import { emailPreferenceInputList } from '../fixture'
import { StyledButton } from '../styled'
import { Heading, FormWrapper } from './styled'

class FormStateCard extends FormState {
  inputsList = emailPreferenceInputList
}

const formStateCard = new FormStateCard()

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

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

  static defaultProps = {
    state: formStateCard,
  }

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

class EmailPreference extends React.Component {
  render() {
    return (
      <FormWrapper>
        <Heading breedType="h2" content={wording.emailPreferenceLabel} />
        <FormCard />
      </FormWrapper>
    )
  }
}

export { EmailPreference }
export default EmailPreference