import React, { SyntheticEvent } from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction } from 'exotic'
import { ObserverInput, ObserverForm, FormState } from '@skava/ui/dist/forms'
import { EditUserInput } from '../fixture'
import { EditUserType } from './typings'
import {
  EditUserFormWrapper,
  StyledSaveButton,
  StyledCancelButton,
} from './styled'

class FormStateCard extends FormState {
  inputsList = EditUserInput
}

const formStateCard = new FormStateCard()

const SubmitButton = props => <StyledSaveButton {...props} />
const CancelButton = props => <StyledCancelButton {...props} />

@observer
class EditUserForm extends ObserverForm<EditUserType> {
  static FormState = formStateCard
  SubmitButton = SubmitButton
  CancelButton = CancelButton
  isCancelButtonNeeded = true
  defaultSubmitButtonLabel = 'Save Changes'
  defaultCancelButtonLabel = 'Cancel'

  static defaultProps = {
    state: formStateCard,
  }

  handleSubmit = (event: SyntheticEvent<HTMLButtonElement>) => {
    event.preventDefault()
    console.debug('data:')
    console.info(this.state.toSerialized())
  }

  handleCancel = (event: SyntheticEvent<HTMLButtonElement>) => {
    const { onCancel } = this.props
    event.preventDefault()
    if (isFunction(onCancel)) {
      onCancel()
    }
  }
}

class EditUser extends React.Component<EditUserType> {
  render() {
    return (
      <EditUserFormWrapper>
        <EditUserForm {...this.props} />
      </EditUserFormWrapper>
    )
  }
}

export { EditUser }
export default EditUser