<template>
    <div class="row m-b-20" @keyup.enter="submitSearch">
        <div class="col">
            <div class="row">
                <div class="col">
                    <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                    <div class="row m-l-0 m-r-0 bg-master-light padding-10" v-show="!isLoading">
                        <div class="col-md col-12">
                            <div class="row">
                                <div class="col">
                                    <validation-wrapper-component :validator="v$.email">
                                        <label class="all-caps">Email</label>
                                        <input type="text" class="form-control" v-model.lazy="email">
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-auto d-flex align-items-center justify-content-center mt-2 mt-md-0">
                            <button type="button" class="btn btn-lg btn-primary fs-11 w-100 d-block mr-2 mr-md-0" @click="submitSearch">Search</button>
                            <button type="button" class="btn btn-lg btn-secondary fs-11 w-100 d-block ml-2 ml-md-0" @click="resetSearch">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row no-margin" v-show="search" :key="serachSectionKey">
                <div class="col bg-white padding-25">
                    <p v-if="!userCompany">{{ message }}</p>
                    <user-company-component v-if="userCompany" :data="userCompany"></user-company-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRequest } from '@/composables/useRequest';
import { useVuelidate } from '@vuelidate/core';
import route from '@/general/functions/router';

const { submit } = useRequest();

const section = 'customerSectionTwoComponent';
const isLoading = ref(false);
const search = ref(false);
const serachSectionKey = ref(2);
const email = ref('');
const userCompany = ref<any>(null);
const message = ref('Searching...');

const rules = { email: {} };
const v$ = useVuelidate(rules, { email });

const submitSearch = () => {
    serachSectionKey.value += 1;
    search.value = true;
    userCompany.value = null;
    message.value = 'Searching...';
    isLoading.value = true;

    submit(route('api.account.user.company', email.value), 'get', section, false, false, undefined, {
        successHandler: (response: any) => {
            if (response.payload.data !== undefined) {
                userCompany.value = response.payload.data;
            } else {
                message.value = 'Customer not found';
            }
            isLoading.value = false;
        },
        errorHandler: (response: any) => {
            if (response.payload?.data === undefined) {
                message.value = 'Customer not found';
            }
            isLoading.value = false;
        }
    });
};

const resetSearch = () => {
    userCompany.value = null;
    search.value = false;
    email.value = '';
    message.value = 'Searching...';
};
</script>
