<?php

namespace Reach\App\Fields\Types;

/**
 * Class ButtonColors
 *
 * @package Reach\App\Fields\Types
 */
class ButtonColors extends \acf_field {

    /**
     * Set basic field properties
     *
     * @since 1.0.0
     */
    function __construct() {
        $this->name     = 'button_colors';
        $this->label    = __( 'Button Color Selection', 'reach' );
        $this->category = __( 'basic', 'reach' );
        $this->defaults = [];

        parent::__construct();
    }

    /**
     * Create the HTML interface for our button colors field
     *
     * @param $field
     */
    function render_field( $field ) {
        $field = array_merge( $this->defaults, $field );

        $field_name = esc_attr( $field['name'] );

        /* overwrite fields with empty values to avoid warning */
        $field['value']['background']       = isset( $field['value']['background'] ) ? $field['value']['background'] : null;
        $field['value']['text']             = isset( $field['value']['text'] ) ? $field['value']['text'] : null;
        $field['value']['border']           = isset( $field['value']['border'] ) ? $field['value']['border'] : null;

        
        $field['value']['background_hover'] = isset( $field['value']['background_hover'] ) ? $field['value']['background_hover'] : null;
        $field['value']['text_hover']       = isset( $field['value']['text_hover'] ) ? $field['value']['text_hover'] : null;
        $field['value']['border_hover']     = isset( $field['value']['border_hover'] ) ? $field['value']['border_hover'] : null;
        ?>

        <div class="acf-button-color__fields">
            <div class="acf-button-color__group">
                <div class="acf-button-color__background acf-field" data-type="color_picker">
                    <label><?php _e( 'Background', 'reach' ); ?></label>
                    <?php
                    acf_render_field( [
                        'type'  => 'color_picker',
                        'name'  => $field_name . '[background]',
                        'id'    => $field_name . '_background',
                        'value' => $field['value']['background'],
                    ] );
                    ?>
                </div>
                <div class="acf-button-color__text acf-field" data-type="color_picker">
                    <label><?php _e( 'Text', 'reach' ); ?></label>
                    <?php
                    acf_render_field( [
                        'type'  => 'color_picker',
                        'name'  => $field_name . '[text]',
                        'id'    => $field_name . '_text',
                        'value' => $field['value']['text'],
                    ] );
                    ?>
                </div>
                <div class="acf-button-color__border acf-field" data-type="color_picker">
                    <label><?php _e( 'Border', 'reach' ); ?></label>
                    <?php
                    acf_render_field( [
                        'type'  => 'color_picker',
                        'name'  => $field_name . '[border]',
                        'id'    => $field_name . '_border',
                        'value' => $field['value']['border'],
                    ] );
                    ?>
                </div>
            </div>
            <div class="acf-button-color__group">
                <div class="acf-button-color__background-hover acf-field" data-type="color_picker">
                    <label><?php _e( 'Background Hover', 'reach' ); ?></label>
                    <?php
                    acf_render_field( [
                        'type'  => 'color_picker',
                        'name'  => $field_name . '[background_hover]',
                        'id'    => $field_name . '_background_hover',
                        'value' => $field['value']['background_hover'],
                    ] );
                    ?>
                </div>
                <div class="acf-button-color__text-hover acf-field" data-type="color_picker">
                    <label><?php _e( 'Text Hover', 'reach' ); ?></label>
                    <?php
                    acf_render_field( [
                        'type'  => 'color_picker',
                        'name'  => $field_name . '[text_hover]',
                        'id'    => $field_name . '_text_hover',
                        'value' => $field['value']['text_hover'],
                    ] );
                    ?>
                </div>
                <div class="acf-button-color__border-hover acf-field" data-type="color_picker">
                    <label><?php _e( 'Border Hover', 'reach' ); ?></label>
                    <?php
                    acf_render_field( [
                        'type'  => 'color_picker',
                        'name'  => $field_name . '[border_hover]',
                        'id'    => $field_name . '_border_hover',
                        'value' => $field['value']['border_hover'],
                    ] );
                    ?>
                </div>
            </div>
            
        </div>
        <?php
    }
}
