const { Builder, By, until, Select } = require('selenium-webdriver'),
  chrome = require('selenium-webdriver/chrome.js'),
  chromeOptions = new chrome.Options(),
  path = require('path');

chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');

let driver;

beforeEach(async () => {
  const builder = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions);
  driver = builder.build();
});

it('loads default scenario on initial page load', async () => {
  await driver.get(url('/'));
  await page.waitUntilMapLoaded(driver);

  const mapResource = page.findMapResourceEl(driver);
  await driver.switchTo().frame(mapResource);

  const defaultScenarioMapsSelector = '#mapsheet2, #mapsheet3';
  const maps = await driver.findElements(By.css(defaultScenarioMapsSelector));

  expect(maps.length).toBe(2);
});

it('loads previously-loaded scenario on page refresh', async () => {
  await driver.get(url('/'));

  const opts = await driver.findElements(By.css('option'));
  const scenario = await opts[1].getAttribute('value');
  await driver.executeScript(`window.localStorage.setItem('map', '${scenario}');`)

  await driver.get(url('/'));
  await page.waitUntilMapLoaded(driver);

  const mapResource = page.findMapResourceEl(driver);
  await driver.switchTo().frame(mapResource);

  const scenarioMapsSelector = '#mapsheet1, #mapsheet2, #mapsheet3';
  maps = await driver.findElements(By.css(scenarioMapsSelector));

  expect(maps.length).toBe(3);
});

it('loads built-in scenario from dialog', async () => {
  await driver.get(url('/'));
  await page.waitUntilMapLoaded(driver);

  const scenarioButton = await driver.findElement(By.css('#show-dialog'));
  await scenarioButton.click();

  const scenarioSelect = await driver.findElement(By.css('select'));
  const select = new Select(scenarioSelect);
  await select.selectByIndex(1);

  const confirmButton = await driver.findElement(By.css('#confirm-btn'));

  const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder'));
  await confirmButton.click();
  await driver.wait(until.elementIsVisible(mapPlaceholderEl), 1000);
  await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000);

  const mapResource = page.findMapResourceEl(driver);
  await driver.switchTo().frame(mapResource);

  const scenarioMapsSelector = '#mapsheet1, #mapsheet2, #mapsheet3';
  let maps = await driver.findElements(By.css(scenarioMapsSelector));

  expect(maps.length).toBe(3);
});

it('loads scenario directly from file', async () => {
  await driver.get(url('/'));
  const mapPlaceholderEl = await driver.findElement(By.css('.map-placeholder'));

  const scenario = path.resolve('./public/assets/images/scenario-dragon_hunting.svg')
  await driver.findElement(By.css('input[type="file"]')).sendKeys(scenario);

  await driver.wait(until.elementIsVisible(mapPlaceholderEl), 1000);
  await driver.wait(until.elementIsNotVisible(mapPlaceholderEl), 1000);

  const mapResource = page.findMapResourceEl(driver);
  await driver.switchTo().frame(mapResource);

  const scenarioMapsSelector = '#mapsheet1, #mapsheet2, #mapsheet3';
  let maps = await driver.findElements(By.css(scenarioMapsSelector));

  expect(maps.length).toBe(3);
});

it.todo('loads saved scenario from file');

afterEach(async () => {
  await driver.quit();
});
