import * as React from 'react'
import { currentYear } from '../../../validators/isValidExpiryDate'
import { addExpiryDateToAttributes } from './deps'
import { ExpiryDateInputState, ExpiryDatePluginProps } from './typings'
import { StyledExpiryDateMonthYear } from './styled'

/**
 * can it count as a `fieldset` plugin type?
 * @todo could keep as 1 input, like google does
 * @example <input required placeholder="MM-YYYY" autocomplete="cc-exp">
 * @see https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
 */
class ExpiryDatePlugin extends React.Component<ExpiryDatePluginProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return props.type === 'expiryDate'
  }
  static defaultState = (inputState: ExpiryDateInputState) => {
    addExpiryDateToAttributes(inputState)
    return {
      validate: () => true,
    }
  }

  render() {
    const state = this.props.state
    const { monthState, yearState } = state.attributes.expiryDateState!

    return (
      <>
        <StyledExpiryDateMonthYear
          label="month"
          state={monthState}
          maxLength={2}
          data-qa="qa-month"
          autoComplete="cc-exp-month"
          type="number"
          min={1}
          max={12}
        />
        <StyledExpiryDateMonthYear
          label="year"
          state={yearState}
          maxLength={4}
          data-qa="qa-year"
          autoComplete="cc-exp-year"
          type="number"
          min={currentYear}
          max={+currentYear * 1.5}
          // max={currentYearTwoDigit}
        />
      </>
    )
  }
}

export { ExpiryDatePlugin }
export default ExpiryDatePlugin