<template>
    <modal id="copyCustomDialog" action="Copy Custom Kink" :disabled="!valid || submitting" @submit.prevent="copyCustom()">
        <form-group field="name" :errors="formErrors" label="Name" id="copyCustomName">
            <input type="text" class="form-control" maxlength="30" required v-model="name" slot-scope="props" id="copyCustomName"
                :class="props.cls"/>
        </form-group>
        <form-group field="description" :errors="formErrors" label="Description" id="copyCustomDescription">
            <input type="text" class="form-control" max-length="250" v-model="description" required id="copyCustomDescription"
                slot-scope="props" :class="props.cls"/>
        </form-group>
        <form-group field="choice" :errors="formErrors" label="Choice" id="copyCustomChoice">
            <select v-model="choice" class="form-control" slot-scope="props" :class="props.cls" id="copyCustomChoice">
                <option value="favorite">Favorite</option>
                <option value="yes">Yes</option>
                <option value="maybe">Maybe</option>
                <option value="no">No</option>
            </select>
        </form-group>
        <form-group field="target" :errors="formErrors" label="Target Character" id="copyCustomTarget">
            <character-select v-model="target" slot-scope="props" :class="props.cls" id="copyCustomTarget"></character-select>
        </form-group>
    </modal>
</template>

<script lang="ts">
    import {Component} from '@f-list/vue-ts';
    import CustomDialog from '../../components/custom_dialog';
    import FormGroup from '../../components/form_group.vue';
    import Modal from '../../components/Modal.vue';
    import {KinkChoice} from '../../interfaces';
    import * as Utils from '../utils';
    import {methods} from './data_store';

    @Component({
        components: {'form-group': FormGroup, modal: Modal}
    })
    export default class CopyCustomDialog extends CustomDialog {
        name = '';
        description = '';
        choice: KinkChoice = 'favorite';
        target = Utils.settings.defaultCharacter;
        formErrors = {};
        submitting = false;

        showDialog(name: string, description: string): void {
            this.name = name;
            this.description = description;
            this.show();
        }

        async copyCustom(): Promise<void> {
            try {
                this.formErrors = {};
                this.submitting = true;
                await methods.characterCustomKinkAdd(this.target, this.name, this.description, this.choice);
                this.submitting = false;
                this.hide();
            } catch(e) {
                this.submitting = false;
                if(Utils.isJSONError(e))
                    this.formErrors = e.response.data;
                else
                    Utils.ajaxError(e, 'Unable to copy custom kink');
            }
        }

        get valid(): boolean {
            return this.name.length > 0 && this.description.length > 0;
        }
    }
</script>