/**
 * @file @todo 2 lines depending on type or props
 */
import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import {
  errorMessage,
  isEmptyOrValidAddress,
} 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'

export type AddressLineType = 'address' | 'addressLine1' | 'addressLine2' | 'addressLine3'

function toAddressLine(type: AddressLineType) {
  switch (type) {
    case 'addressLine3':
      return 'address-line3'
    case 'addressLine2':
      return 'address-line2'
    default:
    case 'address':
    case 'addressLine1':
      return 'address-line1'
  }
}
function toAddressLineQa(type: AddressLineType) {
  switch (type) {
    case 'addressLine3':
      return 'qa-address3'
    case 'addressLine2':
      return 'qa-address2'
    default:
    case 'address':
    case 'addressLine1':
      return 'qa-address1'
  }
}
@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) =>
        isEmptyOrValidAddress(value as string) ||
        errorMessage('addressLine1'),
    }
  }

  render() {
    const { type } = this.props
    const line = toAddressLine(type as AddressLineType)
    const dataQa = toAddressLineQa(type as AddressLineType)
    const isRequired = type === 'address' || type === 'addressLine1'
    return (
      <ObserverInput
        minLength={2}
        required={isRequired}
        placeholder="1 Front Street"
        pattern="^[ A-Za-z0-9,\/\-\s]*$"
        autoComplete={`shipping ${line} street-address`}
        {...this.props}
        dataQa={dataQa}
        type="text"
      />
    )
  }
}

export { AddressLinePlugin }
export default AddressLinePlugin