<script lang="ts" setup>
    import { computed, ref, watch } from 'vue';
    import BaseMaskedInput from '@/UI-kit/components/UI/inputs/BaseMaskedInput.vue';
    import { EInputInputmode } from '@/UI-kit/types';

    const props = withDefaults(
        defineProps<{
            isError?: boolean;
            defaultReg?: string;
            defaultNum?: string;
            disabled?: false;
            value?: string;
        }>(),
        {
            isError: false,
            defaultReg: '',
            defaultNum: '',
            disabled: false,
            value: '',
        },
    );

    const emit = defineEmits([
        'focus',
        'blur',
        'input',
        'input:plateNum',
        'input:plateReg',
        'update:model-value',
    ]);

    const plateNum = ref(props.defaultNum || props.value.slice(0, 6));
    const plateReg = ref(props.defaultReg || props.value.slice(6));
    const regInput = ref();
    const numInput = ref();
    const inputForm = ref();

    const isLetter = (value: string) =>
        /[АВЕКМНОРСТУХавекмнорстухABEKMHOPCTYXabekmhopctyx]/.test(value);

    const isFirstCharLetter = computed(() => isLetter(plateNum.value.charAt(0)));
    const isSecondCharLetter = computed(() => isLetter(plateNum.value.charAt(1)));
    const isEmpty = computed(() => !plateNum.value.length);
    const isTrailerFormat = computed(() => isFirstCharLetter.value && isSecondCharLetter.value);
    const isSpecialFormat = computed(() => !isFirstCharLetter.value);

    const numMask = computed(() => {
        switch (true) {
            case isEmpty.value:
                return 'FF##ff';
            case isTrailerFormat.value:
                return 'ff####';
            case isSpecialFormat.value:
                return '####ff';
            default:
                return 'FF##ff';
        }
    });

    watch(
        () => plateNum.value,
        () => {
            if (plateNum.value.length === numMask.value.length) {
                regInput.value.$el.focus();
            }
        },
    );
</script>

<template>
    <div>
        <div ref="inputForm" class="license-plate" :class="{ 'input--error': isError }">
            <BaseMaskedInput
                id="numInput"
                ref="numInput"
                v-model="plateNum"
                :value="plateNum"
                :maska="numMask"
                class="license-plate__input license-plate__num"
                :class="{ 'input--error': isError }"
                placeholder="A000AA"
                :inputmode="EInputInputmode.text"
                :disabled="disabled"
                @input="
                    emit('input', $event + plateReg);
                    emit('update:model-value', $event + plateReg);
                    emit('input:plateNum', $event);
                "
                @focus="emit('focus', $event)"
                @blur="emit('blur', $event)"
            />
            <BaseMaskedInput
                id="regInput"
                ref="regInput"
                v-model="plateReg"
                :value="plateReg"
                maska="###"
                class="license-plate__input license-plate__reg"
                :class="{ 'input--error': isError }"
                placeholder="000"
                :disabled="disabled"
                :inputmode="EInputInputmode.numeric"
                @input="
                    emit('input', plateNum + $event);
                    emit('update:model-value', plateNum + $event);
                    emit('input:plateReg', $event);
                "
                @focus="emit('focus', $event)"
                @blur="emit('blur', $event)"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
    @use '@/UI-kit/assets/scss/mixins/index.mixin';

    .license-plate {
        position: relative;
        display: flex;
        border: 4px solid var(--gray-300);
        border-radius: 8px;

        &:after {
            @include index.text(14px, 500, 20px);

            position: absolute;
            right: 16px;
            bottom: 5px;
            width: 64px;
            height: 20px;
            background: url('@/UI-kit/assets/images/icon/flag-russia-bordered.svg') no-repeat 100%
                50%;
            color: var(--gray-900);
            content: 'RUS';
            text-align: left;

            @media (max-width: 410px) {
                width: 60px;
            }
        }

        &__input {
            width: 100%;
            background: var(--white);
            color: var(--gray-900);
            border: none;
            outline: none;
            font-weight: 700;
            letter-spacing: -0.005em;

            &::placeholder {
                color: var(--gray-400);
                opacity: 0.5;
                line-height: normal;
            }

            &:disabled {
                opacity: 1;
            }
        }

        &__num {
            padding: 16px;
            font-size: 44px;
            line-height: 48px;
            overflow-y: hidden;
            border-radius: 8px 0 0 8px;

            @media (max-width: 410px) {
                padding: 8px 10px;
                font-size: 32px;
            }
        }

        &__reg {
            @include index.text(32px, 700, 40px);

            width: 100px;
            padding-bottom: 20px;
            border-radius: 0 8px 8px 0;
            border-left: 4px solid var(--gray-300);
            text-align: center;

            @media (max-width: 410px) {
                width: 90px;
                font-size: 24px;
            }
        }

        &__label {
            margin: 2px 5px 0;
            color: var(--gray-900);
            transition: all 0.25s;
            font-size: 10px;
            line-height: 10px;
        }
    }

    .input--error {
        color: var(--red-600);
        transition: all 0.25s;
        border-color: var(--red-600);
    }
</style>
