/* eslint-disable no-plusplus */
/* eslint-disable no-console */
/* eslint-disable no-undef */
const Palette = {
  elements: {
    canvas: {
      canvasElement: null,
      canvasContext: null,
      canvasSize: null,
      field: [],
    },
    fillBucket: null,
    chooseColor: null,
    pencil: null,
  },
  parameters: {
    isMouseOnCanvas: false,
    mouseX: null,
    mouseY: null,
    isDrawing: false,
    colors: {
      defaultColor: 'green', // ??
      prevColor: null,
      currentColor: 'black',
    },
    selectedTool: {
      fillBucket: false,
      chooseColor: false,
      pencil: false,
    },
  },

  init() {
    this.elements.canvas.canvasElement = document.querySelector('#canvas');
    this.elements.canvas.canvasContext = this.elements.canvas.canvasElement.getContext('2d');
    this.elements.fillBucket = document.querySelector('#fillBucket');
    this.elements.chooseColor = document.querySelector('#chooseColor');
    this.elements.pencil = document.querySelector('#pencil');

    this.elements.chooseColor.value = this.parameters.colors.defaultColor;

    // localStorage.removeItem('data');
    // this.getLocalStorage();
    // console.log('thisParams', this.parameters);
    this.createField();
    this.onWidgetClick();
    this.onKeyboardClick();
    this.onCanvasClick();
    this.canvasDraw();
  },

  onCanvasClick() {
    if (this.parameters.selectedTool.pencil) {
      const drawEvent = (e) => {
        this.parameters.mouseX = e.offsetX;
        this.parameters.mouseY = e.offsetY;

        const x = Math.floor(this.parameters.mouseX / 128);
        const y = Math.floor(this.parameters.mouseY / 128);

        this.elements.canvas.field[x][y].color = this.parameters.colors.currentColor;
        this.elements.canvas.field[x][y].isFilled = true;
        this.elements.canvas.canvasContext.fillStyle = this.elements.canvas.field[x][y].color;

        this.canvasDraw();
      };

      this.elements.canvas.canvasElement.addEventListener('mouseover', () => {
        this.parameters.isMouseOnCanvas = true;

        this.elements.canvas.canvasElement.addEventListener('mousedown', (e) => {
          drawEvent(e);
          this.elements.canvas.canvasElement.addEventListener('mousemove', drawEvent);
          this.elements.canvas.canvasElement.addEventListener('mouseup', () => {
            this.elements.canvas.canvasElement.removeEventListener('mousemove', drawEvent);
          });
        });
      });
    }

    this.elements.canvas.canvasElement.addEventListener('mouseout', () => {
      this.parameters.isMouseOnCanvas = false;
    });
  },

  canvasDraw() {
    const size = this.elements.canvas.canvasSize;
    this.elements.canvas.canvasContext.clearRect(0, 0, 512, 512);

    for (let i = 0; i < size; i++) {
      for (let j = 0; j < size; j++) {
        if (this.elements.canvas.field[j][i].isFilled) {
          this.elements.canvas.canvasContext.fillRect(j * 128, i * 128, 128, 128);
        }
      }
    }
  },

  onWidgetClick() {
    const changeClass = () => {
      const selectedItems = this.parameters.selectedTool;
      // eslint-disable-next-line no-restricted-syntax
      for (const key in selectedItems) {
        if (selectedItems[key]) {
          this.elements[key].classList.add('item--selected');
        } else {
          this.elements[key].classList.remove('item--selected');
        }
      }
    };

    this.elements.fillBucket.addEventListener('click', () => {
      this.parameters.selectedTool.fillBucket = true;
      this.parameters.selectedTool.pencil = false;
      this.parameters.selectedTool.chooseColor = false;
      this.parameters.isDrawing = false;
      changeClass();
      this.onCanvasClick();
    });
    this.elements.chooseColor.addEventListener('click', () => {
      this.parameters.selectedTool.fillBucket = false;
      this.parameters.selectedTool.pencil = false;
      this.parameters.selectedTool.chooseColor = true;
      this.parameters.isDrawing = false;
      this.parameters.colors.currentColor = this.elements.chooseColor.value;
      changeClass();
      this.onCanvasClick();
    });
    this.elements.pencil.addEventListener('click', () => {
      this.parameters.selectedTool.fillBucket = false;
      this.parameters.selectedTool.pencil = true;
      this.parameters.selectedTool.chooseColor = false;
      this.parameters.isDrawing = true;
      changeClass();
      this.onCanvasClick();
    });
  },

  onKeyboardClick() {
    const changeClass = () => {
      const selectedItems = this.parameters.selectedTool;
      // eslint-disable-next-line no-restricted-syntax
      for (const key in selectedItems) {
        if (selectedItems[key]) {
          this.elements[key].classList.add('item--selected');
        } else {
          this.elements[key].classList.remove('item--selected');
        }
      }
    };

    window.addEventListener('keydown', (e) => {
      if (e.code === 'KeyB') {
        this.parameters.selectedTool.fillBucket = true;
        this.parameters.selectedTool.pencil = false;
        this.parameters.selectedTool.chooseColor = false;
        this.parameters.isDrawing = false;
        changeClass();
      } else if (e.code === 'KeyC') {
        this.parameters.selectedTool.fillBucket = false;
        this.parameters.selectedTool.pencil = false;
        this.parameters.selectedTool.chooseColor = true;
        this.parameters.isDrawing = false;
        changeClass();
      } else if (e.code === 'KeyP') {
        this.parameters.selectedTool.fillBucket = false;
        this.parameters.selectedTool.pencil = true;
        this.parameters.selectedTool.chooseColor = false;
        this.parameters.isDrawing = true;
        changeClass();
      }
    });
  },

  createField(size = 4) {
    this.elements.canvas.canvasSize = size;

    for (let i = 0; i < size; i++) {
      this.elements.canvas.field[i] = [];
      for (let j = 0; j < size; j++) {
        this.elements.canvas.field[i][j] = { isFilled: false, color: 'white' };
      }
    }
  },

  setLocalStorage() {
    localStorage.removeItem('data');
    const obj = {
      parameters: this.parameters,
    };
    const data = JSON.stringify(obj);
    localStorage.setItem('data', data);
  },

  getLocalStorage() {
    const prevData = localStorage.getItem('data');

    if (prevData) {
      const obj = JSON.parse(prevData);
      this.parameters = obj;
    }
  },
};

document.addEventListener('DOMContentLoaded', () => Palette.init());