@props([
    'label' => null,
    'type' => 'text',
    'icon' => null,
    'prepend' => null,
    'append' => null,
    'rounded' => false,
    'size' => null,
    'help' => null,
    'model' => null,
    'debounce' => false,
    'defer' => true,
    'lazy' => false,
    'mask' => null,
    'direction' => 'col',
    'rowWidth' => 9,
    'outlined' => null,
    'disabled' => false,
    'autocompleteResults' => [],
    'autocompleteModel' => null,
    'autocompleteValueModel' => null,
    'inputOnly' => false,
    'formGroupClass' => '',
    'copyToCb' => null,
])
@php
    if ($type == 'number') $inputmode = 'decimal';
    else if (in_array($type, ['tel', 'search', 'email', 'url'])) $inputmode = $type;
    else $inputmode = 'text';

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

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

    if($mask == 'date' && empty($placeholder)) {
        $placeholder = "jj/mm/aaaa";
    }

    $mask = match($mask) {
        'numeric' => [
            'numeral' => true,
            'numeralDecimalScale' => 0,
            'numeralPositiveOnly' => true
        ],
        'integer' => [
            'numeral' => true,
            'delimiter' => '',
            'numeralDecimalScale' => 0,
            'numeralPositiveOnly' => true
        ],
        'currency' => [
            'numeral' => true,
            'delimiter' => ' ',
            'numeralDecimalScale' => 0,
            'numeralPositiveOnly' => true
        ],
        'decimal-currency' => [
            'numeral' => true,
            'delimiter' => ' ',
            'numeralDecimalScale' => 2,
            'numeralPositiveOnly' => true
        ],
        'decimal-co' => [
            'numeral' => true,
            'numeralDecimalMark' => ',',
            'delimiter' => ' ',
            'numeralDecimalScale' => 2,
        ],
        'decimal-currency-ns' => [
            'numeral' => true,
            'delimiter' => '',
            'numeralDecimalScale' => 2,
            'numeralPositiveOnly' => true
        ],
        'decimal' => [
            'numeral' => true,
            'numeralDecimalScale' => 2,
            'numeralPositiveOnly' => true
        ],
        'decimal-4' => [
            'numeral' => true,
            'numeralDecimalScale' => 4,
            'numeralPositiveOnly' => true
        ],
        'single-decimal' => [
            'numeral' => true,
            'delimiter' => '',
            'numeralDecimalScale' => 1,
            'numeralPositiveOnly' => true
        ],
        'date' => [
            'delimiter' => "/",
            'blocks' => [2, 2, 4],
        ],
        'year' => [
            'date' => true,
            'datePattern' => ['Y']
        ],
        'time' => [
            'time' => true,
            'timePattern' => ['h', 'm']
        ],
        default => $mask
    };

    $attributes = $attributes->class([
        'form-control',
        'form-control-' . $size => $size,
        'form-round' => $rounded,
        'is-invalid' => $errors->has($key),
        'form-control-outlined' => $outlined,
    ])->merge([
        'type' => $type,
        'inputmode' => $inputmode,
        'id' => $id,
        'wire:model' . $bind => $model,
        'col-sm-'.$rowWidth => $isRow,
        'id' => $id,
        'disabled' => $disabled,
    ]);
@endphp

@if($inputOnly)
<x-ui.input-addon :icon="$icon" :label="$prepend" location="left"/>

<input 
    {{ $attributes }}

    x-ref="input"
    x-on:focus="focus = true"
    x-on:click="focus = true"

    @if($outlined)
        x-on:change="input = $el.value"
    @endif

    @if($mask)
        x-init="new Cleave($el, @js($mask))"
        @init-mask.window="new Cleave($el, @js($mask))"
    @endif
>

<x-ui.input-addon :label="$append" location="right"/>

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

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

<x-ui.autocomplete-results 
    :data="$autocompleteResults" 
    :model="$autocompleteModel?? $wireModel"
    :value-model="$autocompleteValueModel ?? null"
/>
@elseif($mask === 'decimal-comma')
<x-ui.form-group :forid="$id" :$label :$direction :$outlined :$rowWidth :$formGroupClass :with-alpine-init="false">
    <div x-data="currencyInput(@entangle($model ?? $wireModel).defer, '{{ $wireModel }}', '{{ $debounce }}')">
        <x-ui.input-addon :icon="$icon" :label="$prepend" location="left"/>

        <input {{ $attributes->except('wire:model' . $bind) }} x-ref="input" x-on:keyup="pushValue">

        <x-ui.input-addon :label="$append" location="right"/>

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

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

        <input id="{{ uniqid() }}" type="text" x-model="model" style="display: none">
    </div>
</x-ui.form-group>
@else
<x-ui.form-group :forid="$id" :$label :$direction :$outlined :$rowWidth :$formGroupClass>
    <x-ui.input-addon :icon="$icon" :label="$prepend" location="left"/>

    <input 
        {{ $attributes }}

        x-ref="input"
        x-on:focus="focus = true"
        x-on:click="focus = true"

        @if($outlined)
            x-on:change="input = $el.value"
        @endif

        @if($mask)
            x-init="new Cleave($el, @js($mask))"
            @init-mask.window="new Cleave($el, @js($mask))"
        @endif
    >


    @if($append)
        <x-ui.input-addon :label="$append" location="right"/>
    @elseif($copyToCb)
        <x-ui.input-addon icon="copy" location="right" 
            x-data="tooltip"
            :data-bs-title="__('Copy to clipboard')"
            x-on:click="navigator.clipboard.writeText($refs.input.value) 
                && $el.querySelector('.icon').classList.add('text-success')
                || setTimeout(() => {
                    $el.querySelector('.icon').classList.remove('text-success')
                }, 400)"
        />
    @endif

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

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

    <x-ui.autocomplete-results 
        :data="$autocompleteResults" 
        :model="$autocompleteModel?? $wireModel"
        :value-model="$autocompleteValueModel ?? null"
    />
</x-ui.form-group>
@endif