<?php


namespace ColibriWP\Theme\Customizer\Controls;


use ColibriWP\Theme\Core\Utils;
use ColibriWP\Theme\Translations;

class RepeaterControl extends VueControl {

    public $type = 'colibri-repeater';
    private $fields = array();


    public static function sanitize( $value, $control_data, $default = '' ) {
        return Utils::sanitizeEscapedJSON( $value );
    }


    protected function printVueContent() {
        ?>

        <div class="colibri-fullwidth">
            <div class="colibri-fullwidth">
                <el-collapse v-sortable-el-accordion="onSortEnd">

                    <el-collapse-item v-for="(item,index) in items" :name="index" :key="item.index">

                        <template slot="title">
                            <?php $this->vueEcho( "itemsLabels[index]" ); ?>
                        </template>

                        <ul class="field-data">
                            <li v-for="(field,name) in fields" :key="name">
                                <label class="field-label"><?php $this->vueEcho( "field.label" ); ?></label>
                                <div class="component-holder"
                                     :is="getComponentType(field.type)"
                                     :value="item[name]"
                                     v-bind="field.props"
                                     @change="propChanged($event,item,name)"></div>
                            </li>
                        </ul>

                        <el-button class="el-button--danger" type="text" v-show="canRemoveItem"
                                   @click="removeItem(index)"><?php Translations::escHtmlE( 'remove' ); ?></el-button>

                    </el-collapse-item>

                </el-collapse>
            </div>

            <div class="colibri-fullwidth">
                <el-button size="medium" v-show="canAdd"
                           @click="addItem()"><?php $this->vueEcho( 'item_add_label' ); ?></el-button>
            </div>
        </div>
        <?php
    }

}