import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';


@Component({
  selector: 'app-homepage-editor',
  templateUrl: './homepage-editor.component.html',
  styleUrls: ['./homepage-editor.component.css']
})
export class HomepageEditorComponent {
  logoUrl = '';
  footerLogo = '';
  headerTitle = 'Build Your Dream Project with Ease';
  headerSub = 'Our mission is to empower creators...';
  signUpBtn = 'Sign Up';
  learnMoreBtn = 'Learn More';
  joinButton = 'Join';

  images: string[] = new Array(6).fill('');

  navLinks = [
    { key: 'nav_home', label: 'Home Page' },
    { key: 'nav_about', label: 'About Us' },
    { key: 'nav_services', label: 'Services' },
    { key: 'nav_more', label: 'More Info' }
  ];

  footerLinks = [
    { key: 'footer_getStarted', label: 'Get Started' },
    { key: 'footer_services', label: 'Our Services' },
    { key: 'footer_contact', label: 'Contact Us' },
    { key: 'footer_about', label: 'About Us' },
    { key: 'footer_support', label: 'Support Center' }
  ];

  updatedJson: { [key: string]: any } = {};

  constructor() {
    this.initJson();
  }

  initJson() {
    this.navLinks.forEach(link => this.updatedJson[link.key] = link.label);
    this.footerLinks.forEach(link => this.updatedJson[link.key] = link.label);
    this.updatedJson['headerTitle'] = this.headerTitle;
    this.updatedJson['headerSub'] = this.headerSub;
    this.updatedJson['signUpBtn'] = this.signUpBtn;
    this.updatedJson['learnMoreBtn'] = this.learnMoreBtn;
  }

  onEdit(key: string, value: string) {
    this.updatedJson[key] = value;
  }

  customSections: { key: string; title: string; content: string }[] = [];

addSection() {
  const key = `custom_section_${this.customSections.length + 1}`;
  const newSection = { key, title: 'New Section Title', content: 'Section content goes here' };
  this.customSections.push(newSection);
  this.updatedJson[key] = newSection.title;
  this.updatedJson[key + '_content'] = newSection.content;
}

  uploadImage(event: any, key: string | number) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = () => {
      if (typeof key === 'string') {
        if (key === 'logo') this.logoUrl = reader.result as string;
        if (key === 'footerLogo') this.footerLogo = reader.result as string;
        this.updatedJson[key] = reader.result;
      } else {
        this.images[key] = reader.result as string;
        this.updatedJson[`image_${key}`] = reader.result;
      }
    };

    if (file) reader.readAsDataURL(file);
  }

  selectedSectionType = '';

addTypedSection() {
  if (this.selectedSectionType === 'navbar') {
    this.navLinks.push({ key: 'nav_new_' + (this.navLinks.length + 1), label: 'New Link' });
    this.updateNavInJson();
  }

  if (this.selectedSectionType === 'footer') {
    this.footerLinks.push({ key: 'footer_new_' + (this.footerLinks.length + 1), label: 'New Footer Link' });
    this.updateFooterInJson();
  }

  this.selectedSectionType = '';
}

updateNavInJson() {
  this.navLinks.forEach(nav => {
    this.updatedJson[nav.key] = nav.label;
  });
}

updateFooterInJson() {
  this.footerLinks.forEach(link => {
    this.updatedJson[link.key] = link.label;
  });
}

}
