const walletContainer = '[data-testid="ethereum-wallet"]';
const walletHeader = '[data-testid="wallet-header"] h1';
const connectToEthButton = '[data-testid="connect-to-eth-wallet-button"]';
const connectorList = '[data-testid="web3-connector-list"]';
const associate = '[href="/staking/associate"]';
const disassociate = '[href="/staking/disassociate"]';
const disconnect = '[data-testid="disconnect-from-eth-wallet-button"]';
const accountNo = '[data-testid="ethereum-account-truncated"]';
const currencyTitle = '[data-testid="currency-title"]';
const currencyValue = '[data-testid="currency-value"]';
const vegaInVesting = '[data-testid="vega-in-vesting-contract"]';
const vegaInWallet = '[data-testid="vega-in-wallet"]';
const progressBar = '[data-testid="progress-bar"]';
const currencyLocked = '[data-testid="currency-locked"]';
const currencyUnlocked = '[data-testid="currency-unlocked"]';
const dialog = '[role="dialog"]';
const dialogHeader = '[data-testid="dialog-title"]';
const dialogCloseBtn = '[data-testid="dialog-close"]';

context('Ethereum Wallet - verify elements on widget', function () {
  before('visit token home page', function () {
    cy.visit('/');
  });

  describe('with wallets disconnected', function () {
    before('wait for widget to load', function () {
      cy.get(walletContainer, { timeout: 10000 }).should('be.visible');
    });

    it('should have ETHEREUM KEY header visible', function () {
      cy.get(walletContainer).within(() => {
        cy.get(walletHeader)
          .should('be.visible')
          .and('have.text', 'Ethereum key');
      });
    });

    it('should have Connect Ethereum button visible', function () {
      cy.get(walletContainer).within(() => {
        cy.get(connectToEthButton)
          .should('be.visible')
          .and('have.text', 'Connect Ethereum wallet to associate $VEGA');
      });
    });
  });

  describe('when Connect Ethereum clicked', function () {
    before('', function () {
      cy.get(connectToEthButton).click();
    });

    it('should have Connect Ethereum header visible', function () {
      cy.get(dialog).within(() => {
        cy.get(dialogHeader)
          .should('be.visible')
          .and('have.text', 'Connect to your Ethereum wallet');
      });
    });

    it('should have connector list visible', function () {
      const connectList = [
        'Unknown',
        'MetaMask, Brave or other injected web wallet',
        'WalletConnect',
      ];
      cy.get(connectorList).within(() => {
        cy.get('button').each(($btn, i) => {
          cy.wrap($btn).should('be.visible').and('have.text', connectList[i]);
        });
      });
    });

    after('close popup', function () {
      cy.get(dialog)
        .within(() => {
          cy.get(dialogCloseBtn).click();
        })
        .should('not.exist');
    });
  });

  describe('when Ethereum wallet connected', function () {
    before('connect to Ethereum wallet', function () {
      cy.ethereum_wallet_connect();
    });

    it('should have ETHEREUM KEY header visible', function () {
      cy.get(walletContainer).within(() => {
        cy.get(walletHeader)
          .should('be.visible')
          .and('have.text', 'Ethereum key');
      });
    });

    it('should have account number visible', function () {
      cy.get(walletContainer).within(() => {
        cy.get(accountNo)
          .should('be.visible')
          .and('have.text', Cypress.env('ethWalletPublicKeyTruncated'));
      });
    });

    it('should have Associate button visible', function () {
      cy.get(walletContainer).within(() => {
        cy.get(associate).should('be.visible').and('have.text', 'Associate');
      });
    });

    it('should have Disassociate button visible', function () {
      cy.get(walletContainer).within(() => {
        cy.get(disassociate)
          .should('be.visible')
          .and('have.text', 'Disassociate');
      });
    });

    it('should have Disconnect button visible', function () {
      cy.get(walletContainer).within(() => {
        cy.get(disconnect).should('be.visible').and('have.text', 'Disconnect');
      });
    });

    describe('VEGA IN VESTING CONTRACT', function () {
      it('should have currency title visible', function () {
        cy.get(vegaInVesting).within(() => {
          cy.get(currencyTitle)
            .should('be.visible')
            .and('have.text', 'VEGAIn vesting contract');
        });
      });

      it('should have currency value visible', function () {
        cy.get(vegaInVesting).within(() => {
          cy.get(currencyValue)
            .should('be.visible')
            .invoke('text')
            .should('match', /\d{0,3}(,\d{3})*\.\d{18}$/);
        });
      });

      it('should have progress bar visible', function () {
        cy.get(vegaInVesting).within(() => {
          cy.get(progressBar).should('be.visible');
        });
      });

      it('should have locked currency visible', function () {
        cy.get(vegaInVesting).within(() => {
          cy.get(currencyLocked)
            .should('be.visible')
            .invoke('text')
            .should('match', /\d{0,3}(,\d{3})*\.\d{2}$/);
        });
      });

      it('should have unlocked currency visible', function () {
        cy.get(vegaInVesting).within(() => {
          cy.get(currencyUnlocked)
            .should('be.visible')
            .invoke('text')
            .should('match', /\d{0,3}(,\d{3})*\.\d{2}$/);
        });
      });

      it('should match total & locked/unlocked currency value', function () {
        cy.get(vegaInVesting)
          .within(() => {
            cy.get(currencyValue)
              .invoke('text')
              .convert_token_value_to_number()
              .as('value');
            cy.get(currencyLocked)
              .invoke('text')
              .convert_token_value_to_number()
              .as('locked');
            cy.get(currencyUnlocked)
              .invoke('text')
              .convert_token_value_to_number()
              .as('unlocked');
          })
          .then(function () {
            expect(this.value).to.equal(this.locked + this.unlocked);
          });
      });
    });

    describe('VEGA IN WALLET', function () {
      it('should have currency title visible', function () {
        cy.get(vegaInWallet).within(() => {
          cy.get(currencyTitle)
            .should('be.visible')
            .and('have.text', 'VEGAIn Wallet');
        });
      });

      it('should have currency value visible', function () {
        cy.get(vegaInWallet).within(() => {
          cy.get(currencyValue)
            .should('be.visible')
            .invoke('text')
            .should('match', /\d{0,3}(,\d{3})*\.\d{18}$/);
        });
      });

      it('should have progress bar visible', function () {
        cy.get(vegaInWallet).within(() => {
          cy.get(progressBar).should('be.visible');
        });
      });

      it('should have locked currency visible', function () {
        cy.get(vegaInWallet).within(() => {
          cy.get(currencyLocked)
            .should('be.visible')
            .invoke('text')
            .should('match', /\d{0,3}(,\d{3})*\.\d{2}$/);
        });
      });

      it('should have unlocked currency visible', function () {
        cy.get(vegaInWallet).within(() => {
          cy.get(currencyUnlocked)
            .should('be.visible')
            .invoke('text')
            .should('match', /\d{0,3}(,\d{3})*\.\d{2}$/);
        });
      });

      it('should match total & locked/unlocked currency value', function () {
        cy.get(vegaInWallet)
          .within(() => {
            cy.get(currencyValue)
              .invoke('text')
              .convert_token_value_to_number()
              .as('value');
            cy.get(currencyLocked)
              .invoke('text')
              .convert_token_value_to_number()
              .as('locked');
            cy.get(currencyUnlocked)
              .invoke('text')
              .convert_token_value_to_number()
              .as('unlocked');
          })
          .then(function () {
            expect(this.value).to.equal(this.locked + this.unlocked);
          });
      });
    });
  });
});