// Copyright 2022 The Fuchsia Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import chai from 'chai'; // not esm
import * as constant from '../src/constants';
import { State } from '../src/state';
import { LogField } from '../src/fields';
import {LogHeader} from '../components/log_header';
import {LogList} from '../components/log_list';
import {LogViewOptions} from '../src/fields';

const logOptions: LogViewOptions = {
  columnFormatter: (_fieldName, text) => text,
  showControls: true
};

before(() => {
  chai.should();
});

describe('LogHeader', () => {
  let state: State;
  let logHeader: LogHeader;
  let logList: LogList;
  let root: HTMLElement;

  beforeEach(async () => {
    root = document.createElement('div');
    document.body.appendChild(root);
    state = new State();
    logList = new LogList(state.currentFields, state.shouldWrapLogs,
      state.setHeaderWidth.bind(state), state.currentFilter, logOptions);
    root.appendChild(logList);
    await logList.updateComplete;
    logHeader = logList.shadowRoot!.children[0] as LogHeader;
  });

  afterEach(() => {
    root.remove();
  });

  describe('#constructor', () => {
    it('creates header cells for table with resize div', () => {
      const headers = Object.keys(constant.LOGS_HEADERS);
      logHeader.children.length.should.equal(7);
      for (let i = 0; i < logHeader.children.length; i++) {
        logHeader.children[i].id.should.equal(headers[i]);
        if (i === logHeader.children.length - 1) {
          logHeader.children[i].children.length.should.equal(0);
        } else {
          logHeader.children[i].children[0].outerHTML.should.equal('<div class="column-resize"></div>');
        }
        // Check aria label and index.
        logHeader.children[i].should.have.attr('aria-label');
        logHeader.children[i].should.have.attr('aria-colindex');
        logHeader.children[i].ariaColIndex?.should.equal(`${i + 1}`);
      }
    });

    it('maintains header size state in session', () => {
      // Headers except for message are set to percentages in first session.
      let lastWidth = logHeader.clientWidth;
      for (let i = 0; i < logHeader.children.length - 1; i++) {
        let header = logHeader.children[i].id as LogField;
        let stateWidth = parseInt(state.currentFields[header].width) * logHeader.clientWidth / 100;
        logHeader.children[i].clientWidth.should.equal(Math.round(stateWidth));
        lastWidth -= Math.round(stateWidth);
      }
      logHeader.children[logHeader.children.length - 1].clientWidth.should.equal(Math.round(lastWidth));
    });

  });

  describe('on mouse drag', () => {
    it('has the resizing class', () => {
      const monikerEl = logHeader.children[3] as HTMLElement;
      monikerEl.children[0].classList.contains('resizing').should.equal(false);
      monikerEl.children[0].dispatchEvent(new MouseEvent('mousedown'));
      monikerEl.children[0].classList.contains('resizing').should.equal(true);
    });

    it('resizes based on mouse move', () => {
      const monikerEl = logHeader.children[3] as HTMLElement;
      monikerEl.style.width = '100px';
      const monikerWidthOnPage = monikerEl.clientWidth;

      monikerEl.style.width.should.equal(`${monikerWidthOnPage}px`);
      monikerEl.children[0].dispatchEvent(new MouseEvent('mousedown', { clientX: 0 }));
      document.dispatchEvent(new MouseEvent('mousemove', { clientX: 20 }));
      window.getComputedStyle(monikerEl).width.should.equal(`${monikerWidthOnPage + 20}px`);
    });
  });

  describe('on mouse double click', () => {
    it('resizes column to stored size', () => {
      const monikerEl = logHeader.children[3] as HTMLElement;
      const monikerWidth = 100;
      const testWidth = 200;

      monikerEl.style.width = '100px';
      monikerEl.style.width.should.equal(`${monikerWidth}px`);
      logHeader.setMaxCellWidth('moniker', testWidth);
      monikerEl.children[0].dispatchEvent(new MouseEvent('dblclick'));
      window.getComputedStyle(monikerEl).width.should.equal(`${testWidth}px`);
    });
  });
});