<template>
    <nb-container>
        <Header
            title="Добавить"
            :navigation="this.props.navigation"
            :leftButton="{
                show: true,
                icon: 'md-arrow-back',
                action: () => this.props.navigation.goBack()
            }"
            :rightButton="{
                show: false
            }"
        />

        <nb-content>
            <nb-form>
                <nb-separator bordered>
                    <nb-text>Информация о предмете</nb-text>
                </nb-separator>

                <nb-item stackedLabel>
                    <nb-label>Название предмета</nb-label>
                    <nb-input />
                </nb-item>

                <nb-item stackedLabel>
                    <nb-label>Номер аудитории</nb-label>
                    <nb-input />
                </nb-item>

                <nb-list-item
                    class="checkbox-wrapper"
                    last
                    :onPress="() => lesson.nullable = !lesson.nullable"
                >
                    <nb-left>
                        <nb-text>Нет занятия</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-checkbox
                            class="checkbox"
                            :checked="lesson.nullable"
                            color="#3f51b5"
                        />
                    </nb-right>
                </nb-list-item>

                <nb-separator bordered>
                    <nb-text>День недели</nb-text>
                </nb-separator>

                <nb-item class="picker" picker last>
                    <nb-picker
                        mode="dropdown"
                        :style="{ width: 350 }"
                        placeholder="День недели"
                        placeholderStyle="{ color: '#bfc6ea' }"
                        placeholderIconColor="#007aff"
                        :iosIcon="getIosIcon()"
                        :selectedValue="day"
                        :onValueChange="selectDay"
                    >
                        <item label="Понедельник" value="monday" />
                        <item label="Вторник" value="tuesday" />
                        <item label="Среда" value="wednesday" />
                        <item label="Четверг" value="thursday" />
                        <item label="Пятница" value="friday" />
                        <item label="Суббота" value="saturday" />
                    </nb-picker>
                </nb-item>

                <nb-separator bordered>
                    <nb-text>Выбор недели</nb-text>
                </nb-separator>

                <nb-list-item
                    :selected="week === 'uneven'"
                    :onPress="() => week = 'uneven'"
                >
                    <nb-left>
                        <nb-text>Нечетная неделя</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-radio :selected="week === 'uneven'" />
                    </nb-right>
                </nb-list-item>

                <nb-list-item
                    :selected="week === 'even'"
                    :onPress="() => week = 'even'"
                >
                    <nb-left>
                        <nb-text>Четная неделя</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-radio :selected="week === 'even'"/>
                    </nb-right>
                </nb-list-item>
            </nb-form>

            <nb-content padder>
                <nb-button
                    class="button"
                    block
                    primary
                    :onPress="validate"
                >
                    <nb-text>Добавить</nb-text>
                </nb-button>
            </nb-content>
        </nb-content>
    </nb-container>
</template>

<script>
    import React from "react";
    import * as SQLite from 'expo-sqlite';
    import { Picker, Icon, Toast } from "native-base";

    import Header from "../../components/Header";

    export default {
        name: 'AddLesson',
        components: {
            Header,
            Item: Picker.Item
        },
        data() {
            return {
                day: "",
                week: "uneven",
                lesson: {
                    name: "",
                    audience: "",
                    nullable: false
                }
            }
        },
        methods: {
            selectDay(value) {
                this.day = value;
            },
            getIosIcon() {
                return <Icon name="ios-arrow-down-outline" />;
            },
            validate() {
                if (
                    (
                        this.lesson.name === "" ||
                        this.lesson.audience === ""
                    ) &&
                    (
                        this.lesson.nullable === false
                    )

                ) {
                    Toast.show({
                        text: "Все поля должны быть заполнены!",
                        buttonText: "Закрыть",
                        type: "danger",
                        duration: 3000
                    });
                } else this.addLesson();
            },
            addLesson() {
                let db = SQLite.openDatabase("database.db");

                db.transaction((tx) => {
                    tx.executeSql(
                        `create table if not exists lessons_${this.day}_${this.week} (id integer primary key not null, name real, audience real nullable)`
                    );
                });

                if (this.lesson.nullable) {
                    db.transaction((tx) => {
                        tx.executeSql(
                            `insert into lessons_${this.day}_${this.week} (name, audience) values (?, ?)`,
                            [
                                "Пустая пара",
                                null
                            ],
                            this.test(data)
                        );
                    },
                    null,
                    console.log(db)
                    );
                }
            },
            test(data) {
                console.log(data)
            }
        }
    }
</script>

<style scoped>
    .picker {
        border-bottom-width: 0;
    }

    .checkbox {
        margin-right: 10px;
    }

    .button {
        margin-top: 20px;
    }
</style>