import { waitForReact } from 'testcafe-react-selectors'
import {
  getBaseUrl,
  getUserDataDir,
  assertNoConsoleErrors,
  cleanTestEnvironment,
  cleanElectronEnvironment,
} from './utils/helpers'
import Onboarding from './pages/onboarding'
import Loading from './pages/loading'
import { isMainnetAutopilot, isNetworkSelectionEnabled } from '../../utils/featureFlag'

const onboarding = new Onboarding()
const loading = new Loading()

fixture('Onboarding (create)')
  .page(getBaseUrl())
  .beforeEach(async t => {
    await waitForReact()
    t.fixtureCtx.userDataDir = await getUserDataDir()
  })
  .afterEach(async t => {
    await assertNoConsoleErrors(t)
    await cleanTestEnvironment()
  })
  .after(async ctx => {
    await cleanElectronEnvironment(ctx)
  })

test('should create a new wallet', async t => {
  await t
    // Fill out and submit ConnectionType form.
    .expect(onboarding.connectionType.exists)
    .ok()
    .click(onboarding.nextButton)

    // Wait for SeedView to generate seed and then submit the form.
    .expect(onboarding.seedView.withProps({ isFetchingSeed: false }).exists)
    .ok()
    .expect(onboarding.nextButton.hasAttribute('disabled'))
    .notOk('ready to be clicked')
    .click(onboarding.nextButton)

    // Ensure we navigate to the SeedConfirm step next.
    .expect(onboarding.seedConfirm.exists)
    .ok()

  // Select the relevant seed words.
  const seedConfirmState = await onboarding.seedConfirm.getReact()
  const { seed } = seedConfirmState.props
  const word1 = seed[seedConfirmState.state.seedWordIndexes[0] - 1]
  const word2 = seed[seedConfirmState.state.seedWordIndexes[1] - 1]
  const word3 = seed[seedConfirmState.state.seedWordIndexes[2] - 1]
  const password = 'password'

  // Fill out and submit SeedConfirm form.
  await t
    .typeText(onboarding.seeedWordInput1, word1, { paste: true })
    .typeText(onboarding.seeedWordInput2, word2, { paste: true })
    .typeText(onboarding.seeedWordInput3, word3, { paste: true })
    .click(onboarding.nextButton)

    // Fill out Password form.
    .typeText(onboarding.passwordInput, password, { paste: true })

    // Verify password confirm behavior.
    .typeText(onboarding.passwordConfirmInput, 'incorrect password', { paste: true })
    .click(onboarding.nextButton)
    .expect(onboarding.nextButton.hasAttribute('disabled'))
    .ok()
    .typeText(onboarding.passwordConfirmInput, password, { paste: true, replace: true })
    .expect(onboarding.nextButton.hasAttribute('disabled'))
    .notOk('ready to be submitted')

    // Check if "Show/Hide password" functionality is working
    .click(onboarding.passwordInputSeePasswordButton)

    // We can see the password now
    .expect(onboarding.passwordInput.value)
    .eql(password, 'password equals to what we entered earlier')

    // Input type is text and not password as it was previously
    .expect(onboarding.passwordInput.getAttribute('type'))
    .eql('text')

    // Click on the "Show/Hide password" button again to hide password
    .click(onboarding.passwordInputSeePasswordButton)

    // We can't see the password now
    .expect(onboarding.passwordInput.textContent)
    .notEql(password, 'password is hidden now')

    // Input type is password and not text as it was previously
    .expect(onboarding.passwordInput.getAttribute('type'))
    .eql('password')

    // Continue
    .click(onboarding.nextButton)

    // Fill out and submit Name form.
    .typeText(onboarding.nameInput, 'My Test Wallet', { paste: true })
    .click(onboarding.nextButton)

    // Fill out and submit Network form.
    .expect(!isNetworkSelectionEnabled() || onboarding.network.exists)
    .ok()
    .click(onboarding.nextButton)

    // Fill out and submit Autopilot form.
    .expect(!isMainnetAutopilot() || onboarding.autopilot.exists)
    .ok()
    .click(onboarding.nextButton)

    // Verify that we show the loading bolt and syncing page.
    .expect(loading.loadingBolt.exists)
    .ok()
})

@@ -1247,155 +1247,142 @@
 on)%0A
-%0A    // Ensure we navigate to the SeedConfirm step next.%0A    .expect(onboarding.seedConfirm.exists)%0A    .ok()%0A%0A  // Select the relevant seed words.
+    .expect(onboarding.seedConfirm.exists)%0A    .ok()%0A%0A  const seed = await onboarding.seedConfirm.getReact((%7B props %7D) =%3E props.seed)%0A
 %0A  c
@@ -1390,28 +1390,27 @@
 nst seed
-ConfirmState
+WordIndexes
  = await
@@ -1446,51 +1446,54 @@
 act(
-)
 %0A  
-const %7B seed
+  (%7B state
  %7D
+)
  =
+%3E
  s
-eedConfirmState.props
+tate.seedWordIndexes%0A  )%0A
 %0A  c
@@ -1510,39 +1510,16 @@
  = seed%5B
-seedConfirmState.state.
 seedWord
@@ -1555,39 +1555,16 @@
  = seed%5B
-seedConfirmState.state.
 seedWord
@@ -1604,31 +1604,8 @@
 eed%5B
-seedConfirmState.state.
 seed
@@ -1620,24 +1620,25 @@
 xes%5B2%5D - 1%5D%0A
+%0A
   const pass

use getReact callback style