<?php
/**
 * Building form for selecting Fonts related
 * css styles, the final output is
 * an array that is suitable for CSSBuilder_Rules_Font
 *
 * You can use the CSSBuilder_Factory for building the
 * final CSS for the fonts.
 *
 * @todo implement auto loading mechanism for google fonts
 * @todo implement preview box.
 *
 * @author jason.xie@victheme.com
 *
 */
class VTCore_Wordpress_Form_WpFonts
extends VTCore_Bootstrap_Form_Base
implements VTCore_Form_Interface {

  protected $context = array(
    'text' => false,
    'description' => false,
    'required' => false,

    'name' => false,
    'id' =>  false,
    'class' => array('form-control'),
    'label' => true,

    'type' => 'div',

    // Wrapper Element
    'type' => 'div',
    'attributes' => array(
      'class' => array(
        'form-group',
        'wp-fonts',
      ),
    ),

    'value' => array(
      'font' => array(
        'weight' => '',
        'family' => '',
        'size' => '',
        'color' => '',
        'style' => '',
        'height' => '',
        'shadow' => '',
        'variant' => '',
        'spacing' => '',
      ),
    ),
  );

  private $families = array(
    'georgia, serif' => array(
      'text' => 'Georgia',
      'attributes' => array(
        'value' => 'georgia, serif',
      ),
    ),
    'arial, helvetica, sans-serif' => array(
      'text' => 'Arial',
      'attributes' => array(
        'value' => 'arial, helvetica, sans-serif',
      ),
    ),
    'impact, charcoal, sans-serif' => array(
      'text' => 'Impact',
      'attributes' => array(
        'value' => 'impact, charcoal, sans-serif',
      ),
    ),
    'tahoma, geneva, sans-serif' => array(
      'text' => 'Tahoma',
      'attributes' => array(
        'value' => 'tahoma, geneva, sans-serif',
      ),
    ),
    'verdana, geneva, sans-serif' => array(
      'text' => 'Verdana',
      'attributes' => array(
        'value' => 'verdana, geneva, sans-serif',
      ),
    ),
  );

  private $googleFonts;
  private $font;

  public function buildElement() {

    VTCore_Wordpress_Utility::loadAsset('wp-fonts');

    parent::buildElement();

    // Build google fonts
    $this->googleFonts = new VTCore_Wordpress_Data_Google_Fonts();
    $this->families += $this->googleFonts->getOptions();

    $this
      ->BsText(array(
        'text' => __('Size', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][size]',
        'value' => $this->getContext('value.font.size'),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsSelect(array(
        'text' => __('Family', VTCORE_LANGUAGE),
        'options' => array('' => __('None', VTCORE_LANGUAGE)) + $this->families,
        'name' => $this->getContext('name') . '[font][family]',
        'value' => $this->getContext('value.font.family'),
        'input_elements' => array(
          'data' => array(
            'font' => 'family',
          ),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsSelect(array(
        'text' => __('Weight', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][weight]',
        'value' => $this->getContext('value.font.weight'),
        'options' => array(
          '' => __('Not set', VTCORE_LANGUAGE),
          'inherit' => __('Inherit',VTCORE_LANGUAGE),
          100 => __('Thin', VTCORE_LANGUAGE),
          200 => __('Extra light', VTCORE_LANGUAGE),
          300 => __('Light', VTCORE_LANGUAGE),
          400 => __('Normal', VTCORE_LANGUAGE),
          500 => __('Medium', VTCORE_LANGUAGE),
          600 => __('Demi bold', VTCORE_LANGUAGE),
          700 => __('Bold', VTCORE_LANGUAGE),
          800 => __('Heavy', VTCORE_LANGUAGE),
          900 => __('Black', VTCORE_LANGUAGE),
        ),
        'input_elements' => array(
          'data' => array(
            'font' => 'weight',
          ),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsSelect(array(
        'text' => __('Style', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][style]',
        'value' => $this->getContext('value.font.style'),
        'options' => array(
          '' => __('Not set', VTCORE_LANGUAGE),
          'normal' => __('Normal', VTCORE_LANGUAGE),
          'oblique' => __('Oblique', VTCORE_LANGUAGE),
          'italic' => __('Italic', VTCORE_LANGUAGE),
          'inherit' => __('Inherit',VTCORE_LANGUAGE),
        ),
        'attributes' => array(
          'class' => array(
            'clearboth',
            'clear',
          ),
        ),
        'input_elements' => array(
          'data' => array(
            'font' => 'style',
          ),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsSelect(array(
        'text' => __('Variant', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][variant]',
        'value' => $this->getContext('value.font.variant'),
        'options' => array(
          '' => __('Not set', VTCORE_LANGUAGE),
          'normal' => __('Normal', BASE_THEME),
          'small-caps' => __('Small Caps', BASE_THEME),
          'initial' => __('Initial', BASE_THEME),
          'inherit' => __('Inherit', BASE_THEME),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsText(array(
        'text' => __('Line Height', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][height]',
        'value' => $this->getContext('value.font.height'),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsColor(array(
        'text' => __('Color', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][color]',
        'value' => $this->getContext('value.font.color'),
        'data' => array(
          'font' => 'color',
          'container' => '#font-color-selector-' . $this->getMachineID(),
        ),
        'attributes' => array(
          'id' => 'font-color-selector-' . $this->getMachineID(),
          'class' => array(
            'clearboth',
            'clear',
          ),
        ),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsText(array(
        'text' => __('Letter Spacing', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][spacing]',
        'value' => $this->getContext('value.font.spacing'),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ))
      ->BsText(array(
        'text' => __('Shadow', VTCORE_LANGUAGE),
        'name' => $this->getContext('name') . '[font][shadow]',
        'value' => $this->getContext('value.font.shadow'),
        'grids' => array(
          'columns' => array(
            'mobile' => 4,
            'tablet' => 4,
            'small' => 4,
            'large' => 4,
          )
        ),
      ));
  }
}