import React, { useMemo } from "react"
import { Alert, Form } from "react-bootstrap"
import { isValidExtPubKey } from "@swan-bitcoin/xpub-lib"

const ExtPubKeyInput = ({ extPubKey, network, onChange }) => {
  const isValid = useMemo(() => isValidExtPubKey(extPubKey, network), [
    extPubKey,
    network,
  ])

  const isEmptyExtPubKey = extPubKey === ""
  const isFilled = !isEmptyExtPubKey

  return (
    <Form noValidate>
      <Form.Group>
        <Form.Control
          isValid={isFilled && isValid}
          isInvalid={isFilled && !isValid}
          size="lg"
          type="password"
          placeholder="xpub..."
          value={extPubKey}
          onChange={onChange}
        />
      </Form.Group>
      {isFilled && !isValid && (
        <Alert variant="warning">Invalid public key</Alert>
      )}
    </Form>
  )
}

export { ExtPubKeyInput }