<template>
    <v-hover v-slot="{ hover }">
        <v-card
            tile
            flat
            :disabled="control.isDisabled"
            class="d-flex justify-space-between align-start"
        >
            <v-sheet
                :width="'calc(100% - ' + (hover || (control.mode == 'edit') ? control.btnWidth : 0) + 'px)'"
            >
                <v-text-field 
                    ref="Editable"
                    :id="control.id"
                    :hide-details="control.hideDetails"
                    :dense="control.dense"
                    :outlined="control.isOutlined"
                    :clearable="control.clearable"
                    :maxlength="control.maxLength"
                    :persistent-hint="control.persistentHint"
                    :hint="control.hint"
                    :height="control.height"
                    :error-messages="control.errors"
                    :class="{
                        'cs-control': true,
                        'cs-text-box': true,
                    }"
                    :type="control.type"
                    :hide-spin-buttons="true"
                    :name="control.name"
                    :readonly="control.isReadonly"

                    :label="control.label"

                    v-model="control.activeRecord.value"
                />
            </v-sheet>

            <v-sheet
                :width="control.btnWidth"
                v-if="(control.mode == 'edit') || hover"
            >
                <cs-btn 
                    v-if="control.mode == 'edit'"
                    icon="mdi-content-save"
                    :color="control.btn.color"
                    @click="() => control.Save()"
                />

                <cs-btn 
                    :icon="control.getIcon"
                    @click="() => control.ToggleMode()"
                />
            </v-sheet>

        </v-card>
    </v-hover>
</template>

<script>
    export default {
        props: {
            control: {required: true},
        },

        watch: {
            'control.mode': function(mode) {
                if(mode == 'edit') {
                    this.$refs.Editable.focus();
                }
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'EditableText',
    }
</script>