<?php

namespace GriffinForms\Frontend\Html\Forms\Fields;

final class TextArea extends \GriffinForms\Frontend\Html\Forms\Fields\Format
{   
    protected function formControl($iteration = 0)
    {

        $maxlength = ($this->isMaxChars()) ? ' maxlength=' . $this->validations['max_chars'] : '';
        $readonly = ($this->isReadonly()) ? ' readonly' : '';
        $disabled = ($this->isDisabled()) ? ' disabled' : '';
        $autocomplete = ($this->isAutoComplete()) ? ' autocomplete=on' : ' autocomplete=off';

        $attrs = $maxlength . $readonly . $disabled . $autocomplete;

        $html = '<textarea class="' . esc_attr($this->html_ids['formcontrol']) . ' form-control mb-1"';
        $html .= ' data-gf-formpage="' . absint($this->data['formpage']) . '"' . esc_attr($attrs) . '>';
        $html .= esc_html($this->value);
        $html .= '</textarea>';
        $html .= $this->charCounter();
        return $html;
    }

    protected function charCounter()
    {
        if ($this->isMaxChars()) {
            $html = '<div class="d-flex small justify-content-end text-secondary">';
            $html .= '<div>';
            $html .= '<span class="griffinforms-textarea-charcount small">0</span>';
            $html .= ' / ';
            $html .= '<span class="small">' . absint($this->validations['max_chars']) . '</span>';
            $html .= '</div>';
            $html .= '</div>';
            return $html;
        }
    }
    
    protected function setErrors()
    {
        $this->errors = array(
            'required',
            'minchars',
            'maxchars',
            'unique'
        );
    }

    protected function isMinChars()
    {
        if (array_key_exists('min_chars', $this->validations) and is_numeric($this->validations['min_chars'])) {
            return true;
        } else {
            return false;
        }
    }
    
    protected function isMaxChars()
    {
        if (array_key_exists('max_chars', $this->validations) and is_numeric($this->validations['max_chars'])) {
            return true;
        } else {
            return false;
        }
    }

    protected function minCharsJs($error)
    {
        echo '
            $(actionBtn).hover(function(){
                $(formControl).each(checkMinChars);
            });

            $(formControl).keyup(checkMinChars);
            
            function checkMinChars() {

                let value = $.trim($(this).val());
                        
                if(value === "") {
                    removeAlert($(this), "' . esc_js($error) . '");
                    return;
                }

                if (value.length < ' . absint($this->validations['min_chars']) . ') {
                    addAlert($(this), "' . esc_js($error) . '");
                } else {
                    removeAlert($(this), "' . esc_js($error) . '");
                }
            }
        ';
    }

    protected function maxCharsJs($error)
    {
        echo '
            $(actionBtn).hover(function(){
                $(formControl).each(checkMaxChars);
            });

            $(formControl).each(updateCharCount);

            $(formControl).keyup(checkMaxChars);
            $(formControl).keyup(updateCharCount);
            
            function checkMaxChars() {
                let value = $.trim($(this).val());
                        
                if(value === "") {
                    removeAlert($(this), "' . esc_js($error) . '");
                    return;
                }

                if (value.length > ' . absint($this->validations['max_chars']) . ') {
                    addAlert($(this), "' . esc_js($error) . '");
                } else {
                    removeAlert($(this), "' . esc_js($error) . '");
                }
            }

            function updateCharCount() {
                let value = $.trim($(this).val());
                let count = value.length;
                let container = $(this).parents(".griffinforms-formcontrol-container");
                container.find(".griffinforms-textarea-charcount").text(count);

            }
        ';
    }
}