describe('Settings', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('should open and close a settings menu by clicking on a button', () => {
    // findByLabelText does not return the input but the label...
    cy.findByLabelText(/Ouvrir les réglages/i)
      .prev()
      .should('not.be.checked');
    cy.findByLabelText(/Ouvrir les réglages/i).click();
    cy.findByLabelText(/Ouvrir les réglages/i)
      .prev()
      .should('be.checked');
    cy.findByLabelText(/Ouvrir les réglages/i).click();
    cy.findByLabelText(/Ouvrir les réglages/i)
      .prev()
      .should('not.be.checked');
  });

  it('should open and close a tooltip by clicking on a button', () => {
    cy.findByLabelText(/Ouvrir les réglages/i).click();
    cy.findByText(/Ackee/).should('not.be.visible');
    cy.findByRole('button', { name: /Aide/i }).click();
    cy.findByText(/Ackee/).should('be.visible');
    cy.findByRole('button', { name: /Aide/i }).click();
    cy.findByText(/Ackee/).should('not.be.visible');
  });

  it('should change the current theme', () => {
    cy.findByLabelText(/Ouvrir les réglages/i).click();
    cy.findByRole('document')
      .parent()
      .then(($html) => {
        const initialTheme = $html.attr('data-theme');

        if (initialTheme === 'light') {
          cy.findByRole('radiogroup', { name: /Thème/i })
            .findByRole('radio', { name: /Thème clair/i })
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Thème/i })
            .findByRole('radio', { name: /Thème sombre/i })
            .should('not.be.checked')
            .check({ force: true }) // because of label
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Thème/i })
            .findByRole('radio', { name: /Thème clair/i })
            .should('not.be.checked');
          cy.findByRole('document')
            .parent()
            .should('have.attr', 'data-theme', 'dark')
            .then(() => {
              expect(localStorage.getItem('theme')).to.eq('"dark"');
            });
        } else {
          cy.findByRole('radiogroup', { name: /Thème/i })
            .findByRole('radio', { name: /Thème sombre/i })
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Thème/i })
            .findByRole('radio', { name: /Thème clair/i })
            .should('not.be.checked')
            .check({ force: true }) // because of label
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Thème/i })
            .findByRole('radio', { name: /Thème sombre/i })
            .should('not.be.checked');
          cy.findByRole('document')
            .parent()
            .should('have.attr', 'data-theme', 'light')
            .then(() => {
              expect(localStorage.getItem('theme')).to.eq('light');
            });
        }
      });
  });

  it('should change the Prism theme', () => {
    cy.findByLabelText(/Ouvrir les réglages/i).click();
    // We assume that the default theme is light theme.
    cy.findByRole('radiogroup', { name: /Blocs de code/i })
      .findByRole('radio', { name: /Thème sombre/i })
      .check({ force: true }) // because of label
      .should('be.checked')
      .then(() => {
        expect(localStorage.getItem('prismjs-color-scheme')).to.eq('"dark"');
      });
    cy.findByRole('radiogroup', { name: /Blocs de code/i })
      .findByRole('radio', { name: /Thème clair/i })
      .check({ force: true }) // because of label
      .should('be.checked')
      .then(() => {
        expect(localStorage.getItem('prismjs-color-scheme')).to.eq('"light"');
      });
  });

  it('should change the motion setting', () => {
    cy.findByLabelText(/Ouvrir les réglages/i).click();
    cy.findByRole('document')
      .parent()
      .then(($html) => {
        const initialValue = $html.attr('data-reduced-motion');

        if (initialValue === 'false') {
          cy.findByRole('radiogroup', { name: /Animations/i })
            .findByRole('radio', { name: /Marche/i })
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Animations/i })
            .findByRole('radio', { name: /Arrêt/i })
            .should('not.be.checked')
            .check({ force: true }) // because of label
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Animations/i })
            .findByRole('radio', { name: /Marche/i })
            .should('not.be.checked');
          cy.findByRole('document')
            .parent()
            .should('have.attr', 'data-reduced-motion', 'true')
            .then(() => {
              expect(localStorage.getItem('reduced-motion')).to.eq('true');
            });
        } else {
          cy.findByRole('radiogroup', { name: /Animations/i })
            .findByRole('radio', { name: /Arrêt/i })
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Animations/i })
            .findByRole('radio', { name: /Marche/i })
            .should('not.be.checked')
            .check({ force: true }) // because of label
            .should('be.checked');
          cy.findByRole('radiogroup', { name: /Animations/i })
            .findByRole('radio', { name: /Arrêt/i })
            .should('not.be.checked');
          cy.findByRole('document')
            .parent()
            .should('have.attr', 'data-reduced-motion', 'true')
            .then(() => {
              expect(localStorage.getItem('reduced-motion')).to.eq('true');
            });
        }
      });
  });

  it('should change the Ackee setting', () => {
    cy.findByLabelText(/Ouvrir les réglages/i)
      .click()
      .then(() => {
        const storedValue = localStorage.getItem('ackee-tracking');
        const parsedStoredValue = storedValue ? JSON.parse(storedValue) : '';

        if (parsedStoredValue === 'full') {
          cy.findByRole('radio', { name: /Complet/i }).should('be.checked');
          cy.findByRole('radio', { name: /Partiel/i })
            .should('not.be.checked')
            .check({ force: true }) // because of label
            .should('be.checked');
          cy.findByRole('radio', { name: /Complet/i })
            .should('not.be.checked')
            .then(() => {
              const newStoredValue = localStorage.getItem('ackee-tracking');
              const parsedNewStoredValue = newStoredValue
                ? JSON.parse(newStoredValue)
                : '';
              expect(parsedNewStoredValue).to.eq('partial');
            });
        } else {
          cy.findByRole('radio', { name: /Partiel/i }).should('be.checked');
          cy.findByRole('radio', { name: /Complet/i })
            .should('not.be.checked')
            .check({ force: true }) // because of label
            .should('be.checked');
          cy.findByRole('radio', { name: /Partiel/i })
            .should('not.be.checked')
            .then(() => {
              const newStoredValue = localStorage.getItem('ackee-tracking');
              const parsedNewStoredValue = newStoredValue
                ? JSON.parse(newStoredValue)
                : '';
              expect(parsedNewStoredValue).to.eq('full');
            });
        }
      });
  });
});