const { renderView } = require('../../../view');

function buildDefaultTemplate() {
  return {
    id: null,
    name: '',
    canvas_size_id: null,
    canvas_size_width: 1920,
    canvas_size_height: 1080,
    background_color: '#111111',
    background_image_path: '',
    region_usage: [],
    regions: []
  };
}

function resolveTemplateCanvasSize(template, canvasSizes) {
  const currentWidth = Math.max(1, Number(template.canvas_size_width || 1920));
  const currentHeight = Math.max(1, Number(template.canvas_size_height || 1080));
  const sizeId = template.canvas_size_id ? Number(template.canvas_size_id) : null;
  const matched = (canvasSizes || []).find((size) => Number(size.id) === sizeId)
    || (canvasSizes || []).find((size) => Number(size.width) === currentWidth && Number(size.height) === currentHeight);

  if (matched) {
    return Object.assign({}, template, {
      canvas_size_id: matched.id,
      canvas_size_label: matched.name,
      canvas_size_width: matched.width,
      canvas_size_height: matched.height,
      background_color: String(template.background_color || '#111111').trim() || '#111111'
    });
  }

  return Object.assign({}, template, {
    canvas_size_id: '',
    canvas_size_label: 'Current size (' + currentWidth + 'x' + currentHeight + ')',
    canvas_size_width: currentWidth,
    canvas_size_height: currentHeight,
    background_color: String(template.background_color || '#111111').trim() || '#111111'
  });
}

module.exports = function renderTemplateFormPage(template, mode, message, canvasSizes, currentUser) {
  const isEdit = mode === 'edit';
  const current = resolveTemplateCanvasSize(template || buildDefaultTemplate(), canvasSizes || []);

  return renderView(isEdit ? 'templates/edit' : 'templates/add', {
    title: isEdit ? 'Edit template' : 'Create Template',
    active: 'templates',
    message: message,
    currentUser: currentUser || null,
    template: current,
    canvasSizes: canvasSizes || [],
    scripts: ['js/lib/modal.js', 'js/templates/template-designer-utils.js', 'js/templates/template-designer.js']
  });
};