/**
 * @file @todo 2 lines depending on type or props
 */
import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import {
  errorMessage,
  isEmptyOrAlphaNumericWithSpace,
} from '../../../validators'
import { Value } from '../../typings'
import { InputProps } from '../../inputs/typings'
import { InputState } from '../../inputs/InputState'
import { ObserverInput } from '../../inputs/ObserverInput'

export type AutoCompleteAddress =
  | 'address-line1'
  | 'address-line2'
  | 'address-line3'
  | 'address-level4'
  | 'address-level3'
  | 'address-level2'
  | 'address-level1'
  | 'street-address'

@observer
class AddressLinePlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['address'].includes(props.type)
  }
  static defaultState = (inputState: InputState) => {
    return {
      label: 'Address',
      tooltip: '☑',
      validator: (value: Value) =>
        isEmptyOrAlphaNumericWithSpace(value as string) ||
        errorMessage('addressLine1'),
    }
  }

  render() {
    return (
      <ObserverInput
        type="text"
        minLength={2}
        required={true}
        placeholder="1 Front Street"
        pattern="[A-Za-z0-9\.\-]+"
        autoComplete="shipping address-line1 street-address"
        {...this.props}
      />
    )
  }
}

export { AddressLinePlugin }
export default AddressLinePlugin