<template>
    <div>

        <h3 class="mb-3">User informations</h3>

        <v-form>
            <v-layout row wrap>

                <v-flex md6 pa-2>
                    <v-text-field
                            v-model="login"
                            label="Login"
                            disabled
                            :prepend-icon="'input'"

                    ></v-text-field>
                </v-flex>

                <v-flex pa-2 md6>
                    <v-text-field
                            v-model="email"
                            label="Email"
                            :prepend-icon="'alternate_email'"
                            disabled
                    ></v-text-field>
                </v-flex>

                <v-flex pa-2 md6>
                    <v-text-field
                            v-model="name"
                            label="Name"
                            :prepend-icon="'account_box'"
                    ></v-text-field>
                </v-flex>

                <v-flex pa-2 md6>

                    <v-text-field
                            v-model="password"
                            label="Password"
                            :prepend-icon="'lock'"
                            v-on:keyup.enter="submit"
                            :append-outer-icon="'cached'"
                            @click:append-outer="generatePassword()"
                    ></v-text-field>

                </v-flex>

                <v-flex pa-2 md6 >
                    <v-text-field
                            v-model="telegram"
                            label="Telegram (ex. username)"
                            prepend-icon="perm_phone_msg"
                            :error-messages="telegramErrors"
                            disabled
                            @input="$v.telegram.$touch()"
                            @blur="$v.telegram.$touch()"
                    ></v-text-field>
                </v-flex>

                <v-flex pa-2 md5>

                    <v-switch
                            v-if="this.telegram_user_id"
                            label="Telegram notifications"
                            color="primary"
                            v-model="telegram_notification"
                            :disabled="!this.telegram_user_id"
                    ></v-switch>

                    <v-btn
                        v-if="!this.telegram_user_id"
                        color="primary"
                        href="https://t.me/solo_crm_bot"
                        target="_blank">Add Telegram</v-btn>

                </v-flex>

            </v-layout>

        </v-form>

        <h3 class="mb-3">My accounts</h3>

        <v-layout wrap>
            <v-flex md12>

                <v-alert
                        :value="true"
                        type="warning"
                >

                    <p class="text-item">
                        <strong> Добавляя имя пользователя в этот список, вы разрешаете ему входить в вашу учетную запись без имени пользователя и пароля и выполнять ВСЕ доступные вам действия</strong>
                    </p>

                    <p class="text-item">
                        <strong>By adding a login to this list, you allow him to enter your account without a username and password and perform ALL actions available to you</strong>
                    </p>

                </v-alert>

                <v-layout align-center>

                    <v-flex md4 mr-3>

                        <v-form
                                ref="form"
                        >
                            <v-text-field
                                    v-model="related_account"
                                    prepend-icon="input"
                                    label="Login or Email"
                            ></v-text-field>
                        </v-form>

                    </v-flex>

                    <v-flex md6>

                        <v-btn
                                class="ml-0"
                                color="primary"
                                :disabled="!related_account"
                                @click="addAccount()"
                        >
                            Add account
                            <v-icon right>add</v-icon>
                        </v-btn>

                    </v-flex>

                </v-layout>

                <v-data-table
                        v-if="allow_auth_users.length"
                        :headers="headers"
                        :items="allow_auth_users"
                        class="elevation-1 mb-2"
                        hide-actions
                >
                    <template v-slot:items="props">

                        <!-- id-->
                        <td class="text-xs-left">
                            {{ props.item.id }}
                        </td>

                        <!--Email-->
                        <td class="text-xs-left ">
                            {{ props.item.email }}
                        </td>

                        <!--login-->
                        <td class="text-xs-left ">
                            {{ props.item.login }}
                        </td>

                        <!-- action-->
                        <td class="text-xs-center">
                            <v-btn
                                    icon
                                    small
                                    flat
                                    title="Delete user"
                                    @click="deleteAllowUser(props.item.login)"
                            >

                                <v-icon>delete_outline</v-icon>

                            </v-btn>
                        </td>

                    </template>

                </v-data-table>

            </v-flex>

        </v-layout>

        <v-btn
                class="ml-0 mt-4"
                color="success"
                depressed
                @click="submit">
            Save
            <v-icon right>save</v-icon>
        </v-btn>

    </div>
</template>

<script>
    import * as ACTIONS from '../../../../store/actions';

    import {validationMixin} from 'vuelidate';
    import {required, minLength} from 'vuelidate/lib/validators';

    export default {
        name: "userForm",

        mixins: [validationMixin],

        validations: {
            name: {required},
            telegram: {
                required,
                minLength: minLength(5),
                isValid(value) {
                    return /^\w+$/.test(value);
                },},
            password: {minLength: minLength(8)},
        },

        data: () => {
            return {
                headers: [
                    {
                        text: 'Id',
                        align: 'left',
                        sortable: false,
                    },

                    {
                        text: 'Email',
                        align: 'left',
                        sortable: false,
                    },

                    {
                        text: 'Login',
                        align: 'left',
                        sortable: false,
                    },

                    {
                        text: 'Action',
                        align: 'center',
                        sortable: false,
                    },

                ],
                related_account: null,
                modal: false,
                valid: true,
                loading: false,
                name: null,
                login: null,
                email: null,
                telegram: null,
                telegram_user_id: null,
                telegram_notification: false,
                password: null,
                sizePassword: 10,
                characters: 'a-z,A-Z,0-9,#',
                result_access: false,
                allow_auth_users: []
            }
        },
        methods: {
            getUserInfo() {
                this.$store.dispatch(ACTIONS.GET_PROFILE)
                    .then(res => {
                        this.name = res.name;
                        this.login = res.login;
                        this.email = res.email;
                        this.telegram = res.telegram;
                        this.telegram_user_id = res.telegram_user_id;
                        this.telegram_notification = res.telegram_notification;
                        this.allow_auth_users = res.allow_auth_users
                    });
            },

            submit() {

                this.$v.$touch();

                if (!this.$v.$invalid) {
                    this.$store.dispatch(ACTIONS.PROFILE_EDIT, {
                        name: this.name,
                        telegram: this.telegram,
                        telegram_user_id: this.telegram_user_id,
                        telegram_notification: this.telegram_notification,
                        password: this.password,
                    }).then(() => {
                        this.$notifySuccess({text: 'Profile updated'});
                        this.$router.push('/profile');

                        this.getUserInfo();
                    });
                }
            },
            generatePassword: function () {
                let charactersArray = this.characters.split(',');
                let CharacterSet = '';
                let password = '';

                if (charactersArray.indexOf('a-z') >= 0) {
                    CharacterSet += 'abcdefghijklmnopqrstuvwxyz';
                }
                if (charactersArray.indexOf('ACTIONS-Z') >= 0) {
                    CharacterSet += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                }
                if (charactersArray.indexOf('0-9') >= 0) {
                    CharacterSet += '0123456789';
                }
                if (charactersArray.indexOf('#') >= 0) {
                    CharacterSet += '![]{}()%&*$#^<>~@|';
                }

                for (let i = 0; i < this.sizePassword; i++) {
                    password += CharacterSet.charAt(Math.floor(Math.random() * CharacterSet.length));
                }
                this.password = password;
            },
            clearForm() {
                this.related_account = null;
            },
            addAccount() {
                this.$store.dispatch(ACTIONS.ADD_RELATED_ACCOUNT, {
                    login: this.related_account,
                }).then(() => {
                    this.$notifySuccess({text: 'Added related account'});

                    this.clearForm();
                    this.getUserInfo();
                });
            },
            deleteAllowUser(login){
                this.$confirm('Are you sure you?').then(res => {
                    if (res) {

                        this.$store.dispatch(ACTIONS.DELETE_RELATED_ACCOUNT, {
                            login: login,
                        }).then(() => {
                            this.$notifySuccess({text: 'Deleted related account'});
                            this.getUserInfo();
                        });
                    }
                })

            },
        },
        mounted: function () {
            this.$v.$touch();
            this.getUserInfo();

        },

        computed: {
            nameErrors() {
                const errors = [];
                if (!this.$v.name.$dirty) return errors;
                !this.$v.name.required && errors.push('Name is required');
                return errors
            },
            telegramErrors() {
                const errors = [];
                if (!this.$v.telegram.$dirty) return errors;
                !this.$v.telegram.required && errors.push('Telegram is required');
                return errors;
            },
            passwordErrors() {
                const errors = [];
                if (!this.$v.password.$dirty) return errors;
                !this.$v.password.minLength && errors.push('Password must contain at least 8 characters');
                return errors;
            },
        },
    }
</script>

<style scoped lang="sass">

    .text-item
        color: #000
        margin-bottom: 5px

</style>