@props([
    'label' => null,
    'icon' => null,
    'prepend' => null,
    'append' => null,
    'rows' => 3,
    'size' => null,
    'help' => null,
    'model' => null,
    'debounce' => false,
    'lazy' => false,
    'characterLimit' => -1,
])

@php
    if ($debounce) $bind = 'debounce.' . (ctype_digit($debounce) ? $debounce : 150) . 'ms';
    else if ($lazy) $bind = 'lazy';
    else $bind = 'defer';

    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $key = $attributes->get('name', $model ?? $wireModel);
    $id = $attributes->get('id', $model ?? $wireModel);

    $attributes = $attributes->class([
        'form-control',
        'form-control-' . $size => $size,
        'rounded-end' => !$append,
        'is-invalid' => $errors->has($key),
    ])->merge([
        'id' => $id,
        'rows' => $rows,
        'wire:model.' . $bind => $model ?? null,
    ]);

    $hasCharacterLimit = $characterLimit > 0 && $model;
@endphp

<div class="form-group" 
    @if($hasCharacterLimit)
        x-data="{content: @entangle($model).defer, limit: {{ $characterLimit }}, getRemaining() { return this.limit - (this.content?.length || 0); }}"
    @endif>
    <x-ui.label :for="$id" :label="$label"/>

    <div class="input-group">
        <x-ui.input-addon :icon="$icon" :label="$prepend"/>

        <textarea {{ $attributes }} @if($hasCharacterLimit) x-ref="content" x-model="content" x-bind:maxlength="limit" @endif></textarea>

        <x-ui.input-addon :label="$append" class="rounded-end"/>

        <x-ui.error :key="$key"/>
    </div>

    @if($hasCharacterLimit)
    <div x-bind:class="{'text-danger': getRemaining() < 0}">
         <span x-text="getRemaining()"></span> caractères restants.
    </div>
    @endif

    <x-ui.help :label="$help"/>
</div>