<script>
import QueryApolloGraphQL from '../api/request';
import pingableTextBox from '../components/inputs/pingableTextBox.vue';
import Dropdown from '../components/dropdown/Dropdown.vue';

export default {
    components: {
        pingableTextBox,
        Dropdown,
    },
    data() {
        return {
            items: [],
            units: ['Alpha', 'Echo', 'RRC', 'HHC', 'Recruit'],
        }
    },
    mounted() {
        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name}}}")
            .then(value => {
                value.forEach(element => {
                    this.items.push(element.member_name)
                });
            }) //console.log(value); for debug reasons
        //this still needs to be implemented\
    }

}
</script>

<template>
    <div class="bg-gray-dark rounded-xl max-w-4xl min-w-formWidth px-5">
        <h1 class="m-0">Unit Transfer</h1>

        <div id="container mx-">
            <div class="flex flex-row items-center">
                <div id="from" class="flex flex-col items-center">
                    <img src="../components/icons/misc/test.png" class="h-40">
                    <p class="text-white text-3xl font-medium">Company</p>
                </div>

                <pingableTextBox :items="Object.values(this.items)" class="mx-5"/>

                <div id="to" class="flex flex-col items-center">
                    <img src="../components/icons/misc/test.png" class="h-40">
                    <p class="text-white text-3xl font-medium">Company</p>
                </div>
            </div>
        </div>

        <Dropdown values="units"></Dropdown>
    </div>
</template>