<?php

namespace App\Komma\Components\ComponentType\Types;

use App\Komma\Components\ComponentType\ComponentTypes;
use App\Komma\Kms\Core\Attributes\Attribute;
use App\Komma\Kms\Core\Attributes\Models\SelectOption;
use App\Komma\Kms\Core\Attributes\OnOff;
use App\Komma\Kms\Core\Attributes\Select;
use App\Komma\Kms\Core\Attributes\TextArea;
use App\Komma\Kms\Core\Attributes\TextField;

class Button extends AbstractComponentType
{
    protected $id = ComponentTypes::BUTTON;

    protected $name = 'button';

    public function __construct()
    {
        parent::__construct();

        $this->attributes->push(
            (new TextField('Tekst in knop'))
                ->setDataAttribute('tab', 'knop')
                ->mapValueFrom(Attribute::ValueFromComponent, 'button_label')
        );

        $this->attributes->push(
            (new TextField('Link'))
                ->setDataAttribute('tab', 'knop')
                ->mapValueFrom(Attribute::ValueFromComponent, 'button_link')
        );

        $this->attributes->push(
            (new OnOff())
                ->setDataAttribute('tab', 'knop')
                ->setLabelText('Openen in nieuw tabblad')
                ->mapValueFrom(Attribute::ValueFromComponent, 'use_target_blank')
        );

        $this->attributes->push(
            (new OnOff())
                ->setDataAttribute('tab', 'knop')
                ->setLabelText('Gebruik donkere knop')
                ->mapValueFrom(Attribute::ValueFromComponent, 'use_secondary_colors')
        );

        $this->attributes->push(
            (new TextField('Titel'))
                ->setDataAttribute('tab', 'teksten')
                ->mapValueFrom(Attribute::ValueFromComponent, 'button_title')
        );

        $this->attributes->push((new TextArea())
            ->setDataAttribute('tab', 'teksten')
            ->enableTinymceEditor()
            ->setLabelText('tekst')
            ->mapValueFrom(Attribute::ValueFromComponent, 'button_text')
        );

        $this->attributes->push((new Select())
            ->setDataAttribute('tab', 'teksten')
            ->setLabelText('Uitlijning')
            ->mapValueFrom(Attribute::ValueFromComponent, 'button_text_alignment')
            ->setItems([
                (new SelectOption())
                    ->setValue('left')
                    ->setHtmlContent('Links')
                    ->setContent('Links'),
                (new SelectOption())
                    ->setValue('center')
                    ->setHtmlContent('Gecentreerd')
                    ->setContent('Gecentreerd'),
                (new SelectOption())
                    ->setValue('right')
                    ->setHtmlContent('Rechts')
                    ->setContent('Rechts'),
            ])
        );
    }
}