<?php

namespace App\Http\Livewire;

use Livewire\Component;

class LiveBuilder extends Component
{
    // Reactive properties to store the page title, description, and image.
    public $title;
    public $description;
    public $image;

    // Reactive property to store the sections for the page.
    public $sections = [];

    // Reactive property to track whether the user is currently editing a section.
    public $edit = false;

    // Use the `mount` lifecycle hook to initialize the reactive properties with any existing page data.
    public function mount($page)
    {
        $this->title = $page->title;
        $this->description = $page->description;
        $this->image = $page->image;
        $this->sections = $page->sections;
    }

    // Use the `save` method to handle the form submission and save the page to the database.
    public function save()
    {
        // Validate the form input.
        $this->validate([
            'title' => 'required',
            'description' => 'required',
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        // Save the page to the database.
        Page::create([
            'title' => $this->title,
            'description' => $this->description,
            'image' => $this->image,
            'sections' => $this->sections,
        ]);

        // Redirect the user to the page they just created.
        return redirect()->to(route('page', ['id' => $page->id]));
    }

    // Use the `addSection` method to add a new section to the page.
    public function addSection()
    {
        $this->sections[] = [
            'title' => '',
            'description' => '',
            'image' => '',
        ];
    }

    // Use the `updateSection` method to update an existing section on the page.
    public function updateSection($index)
    {
        // Validate the form input.
        $this->validate([
            "sections.{$index}.title" => 'required',
            "sections.{$index}.description" => 'required',
            "sections.{$index}.image" => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        // Set the edit property to false to exit edit mode.
        $this->edit = false;
    }

    // Use the `removeSection` method to remove a section from the page.
    public function removeSection($index)
    {
        unset($this->sections[$index]);
    }
}