/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const MONTH_YEAR = ".month-year",
      DAYS_VIEW = ".days-view",
      BTN_PREV_MONTH = ".prev",
      BTN_NEXT_MONTH = ".next";
const DATE_FORMAT = new Intl.DateTimeFormat("en-US", { year: "numeric", month: "long", timeZone: "UTC" }).format;

// Create a list of abbreviations for calendar class names
const W = "weekend",
      O = "outside",
      S = "selection",
      R = "out-of-range",
      T = "today",
      P = "off-step";

// Calendar classlist for 2016-12. Used to verify the classNames are correct.
const calendarClasslist_201612 = [
  [W, O], [O], [O], [O], [],  [],  [W],
  [W],    [],  [],  [],  [],  [],  [W],
  [W],    [],  [],  [],  [S], [],  [W],
  [W],    [],  [],  [],  [],  [],  [W],
  [W],    [],  [],  [],  [],  [],  [W],
  [W, O], [O], [O], [O], [O], [O], [W, O],
];

function getCalendarText() {
  return helper.getChildren(DAYS_VIEW).map(child => child.textContent);
}

function getCalendarClassList() {
  return helper.getChildren(DAYS_VIEW).map(child => Array.from(child.classList));
}

function mergeArrays(a, b) {
  return a.map((classlist, index) => classlist.concat(b[index]));
}

let helper = new DateTimeTestHelper();

registerCleanupFunction(() => {
  helper.cleanup();
});

/**
 * Test that date picker opens to today's date when input field is blank
 */
add_task(async function test_datepicker_today() {
  const date = new Date();

  await helper.openPicker("data:text/html, <input type='date'>");

  Assert.equal(helper.getElement(MONTH_YEAR).textContent, DATE_FORMAT(date));

  await helper.tearDown();
});

/**
 * Test that date picker opens to the correct month, with calendar days
 * displayed correctly, given a date value is set.
 */
add_task(async function test_datepicker_open() {
  const inputValue = "2016-12-15";

  await helper.openPicker(`data:text/html, <input type="date" value="${inputValue}">`);

  Assert.equal(helper.getElement(MONTH_YEAR).textContent, DATE_FORMAT(new Date(inputValue)));
  Assert.deepEqual(
    getCalendarText(),
    [
      "27", "28", "29", "30",  "1",  "2",  "3",
       "4",  "5",  "6",  "7",  "8",  "9", "10",
      "11", "12", "13", "14", "15", "16", "17",
      "18", "19", "20", "21", "22", "23", "24",
      "25", "26", "27", "28", "29", "30", "31",
       "1",  "2",  "3",  "4",  "5",  "6",  "7",
    ],
    "2016-12",
  );
  Assert.deepEqual(
    getCalendarClassList(),
    calendarClasslist_201612,
    "2016-12 classNames"
  );

  await helper.tearDown();
});

/**
 * When the prev month button is clicked, calendar should display the dates for
 * the previous month.
 */
add_task(async function test_datepicker_prev_month_btn() {
  const inputValue = "2016-12-15";
  const prevMonth = "2016-11-01";

  await helper.openPicker(`data:text/html, <input type="date" value="${inputValue}">`);
  helper.click(helper.getElement(BTN_PREV_MONTH));

  Assert.equal(helper.getElement(MONTH_YEAR).textContent, DATE_FORMAT(new Date(prevMonth)));
  Assert.deepEqual(
    getCalendarText(),
    [
      "30", "31",  "1",  "2",  "3",  "4",  "5",
       "6",  "7",  "8",  "9", "10", "11", "12",
      "13", "14", "15", "16", "17", "18", "19",
      "20", "21", "22", "23", "24", "25", "26",
      "27", "28", "29", "30",  "1",  "2",  "3",
       "4",  "5",  "6",  "7",  "8",  "9", "10",
    ],
    "2016-11",
  );

  await helper.tearDown();
});

/**
 * When the next month button is clicked, calendar should display the dates for
 * the next month.
 */
add_task(async function test_datepicker_next_month_btn() {
  const inputValue = "2016-12-15";
  const nextMonth = "2017-01-01";

  await helper.openPicker(`data:text/html, <input type="date" value="${inputValue}">`);
  helper.click(helper.getElement(BTN_NEXT_MONTH));

  Assert.equal(helper.getElement(MONTH_YEAR).textContent, DATE_FORMAT(new Date(nextMonth)));
  Assert.deepEqual(
    getCalendarText(),
    [
      "25", "26", "27", "28", "29", "30", "31",
       "1",  "2",  "3",  "4",  "5",  "6",  "7",
       "8",  "9", "10", "11", "12", "13", "14",
      "15", "16", "17", "18", "19", "20", "21",
      "22", "23", "24", "25", "26", "27", "28",
      "29", "30", "31",  "1",  "2",  "3",  "4",
    ],
    "2017-01",
  );

  await helper.tearDown();
});

/**
 * When a date on the calendar is clicked, date picker should close and set
 * value to the input box.
 */
add_task(async function test_datepicker_clicked() {
  const inputValue = "2016-12-15";
  const firstDayOnCalendar = "2016-11-27";

  await helper.openPicker(`data:text/html, <input type="date" value="${inputValue}">`);
  // Click the first item (top-left corner) of the calendar
  helper.click(helper.getElement(DAYS_VIEW).children[0]);
  await ContentTask.spawn(helper.tab.linkedBrowser, {}, async function() {
    let inputEl = content.document.querySelector("input");
    await ContentTaskUtils.waitForEvent(inputEl, "input");
  });

  Assert.equal(content.document.querySelector("input").value, firstDayOnCalendar);

  await helper.tearDown();
});

/**
 * When min and max attributes are set, calendar should show some dates as
 * out-of-range.
 */
add_task(async function test_datepicker_min_max() {
  const inputValue = "2016-12-15";
  const inputMin = "2016-12-05";
  const inputMax = "2016-12-25";

  await helper.openPicker(`data:text/html, <input type="date" value="${inputValue}" min="${inputMin}" max="${inputMax}">`);

  Assert.deepEqual(
    getCalendarClassList(),
    mergeArrays(calendarClasslist_201612, [
      // R denotes out-of-range
      [R], [R], [R], [R], [R], [R], [R],
      [R], [],  [],  [],  [],  [],  [],
      [],  [],  [],  [],  [],  [],  [],
      [],  [],  [],  [],  [],  [],  [],
      [],  [R], [R], [R], [R], [R], [R],
      [R], [R], [R], [R], [R], [R], [R],
    ]),
    "2016-12 with min & max",
  );

  await helper.tearDown();
});

/**
 * When step attribute is set, calendar should show some dates as off-step.
 */
add_task(async function test_datepicker_step() {
  const inputValue = "2016-12-15";
  const inputStep = "5";

  await helper.openPicker(`data:text/html, <input type="date" value="${inputValue}" step="${inputStep}">`);

  Assert.deepEqual(
    getCalendarClassList(),
    mergeArrays(calendarClasslist_201612, [
      // P denotes off-step
      [P], [P], [P], [],  [P], [P], [P],
      [P], [],  [P], [P], [P], [P], [],
      [P], [P], [P], [P], [],  [P], [P],
      [P], [P], [],  [P], [P], [P], [P],
      [],  [P], [P], [P], [P], [],  [P],
      [P], [P], [P], [],  [P], [P], [P],
    ]),
    "2016-12 with step",
  );

  await helper.tearDown();
});