import { rgbToHex, rgbToHsl } from './converter.js';
import { state } from './app.js';

function rgbToDisplay({ r, g, b }) { return r + ', ' + g + ', ' + b; }
function hslToDisplay({ h, s, l }) { return h + ', ' + s + '%, ' + l + '%'; }

function showColor(r, g, b) {
  const hex = rgbToHex({ r, g, b });
  const hsl = rgbToHsl({ r, g, b });
  state.setColor(hsl);
  document.getElementById('picker-preview').style.background = hex;
  document.getElementById('picker-hex').value = hex;
  document.getElementById('picker-rgb').value = rgbToDisplay({ r, g, b });
  document.getElementById('picker-hsl').value = hslToDisplay(hsl);
  document.getElementById('picker-result').style.display = 'block';
}

function loadImage(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.getElementById('picker-canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      canvas.style.display = 'block';

      // Mittlerer Pixel als Vorschlag
      const mx = Math.floor(img.width / 2);
      const my = Math.floor(img.height / 2);
      const px = ctx.getImageData(mx, my, 1, 1).data;
      showColor(px[0], px[1], px[2]);

      // Eyedropper: Klick wählt Pixel frei
      canvas.onclick = (ev) => {
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        const x = Math.floor((ev.clientX - rect.left) * scaleX);
        const y = Math.floor((ev.clientY - rect.top) * scaleY);
        const d = ctx.getImageData(x, y, 1, 1).data;
        showColor(d[0], d[1], d[2]);
      };
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

export function initPicker(onSaveFavorit, onSaveSchema) {
  const dropzone = document.getElementById('picker-dropzone');

  document.getElementById('picker-file-trigger').addEventListener('click', () => {
    document.getElementById('picker-file-input').click();
  });

  document.getElementById('picker-file-input').addEventListener('change', (e) => {
    if (e.target.files[0]) loadImage(e.target.files[0]);
  });

  dropzone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropzone.classList.add('drag-over');
  });
  dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
  dropzone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropzone.classList.remove('drag-over');
    const file = e.dataTransfer.files[0];
    if (file && file.type.startsWith('image/')) loadImage(file);
  });

  // Paste (Strg+V / Cmd+V)
  document.addEventListener('paste', (e) => {
    const item = Array.from(e.clipboardData.items).find(i => i.type.startsWith('image/'));
    if (item) loadImage(item.getAsFile());
  });

  document.getElementById('picker-fav-btn').addEventListener('click', () => onSaveFavorit(state.color));
  document.getElementById('picker-schema-btn').addEventListener('click', () => onSaveSchema(state.color));
}