<script setup>
import { useRoute } from 'vue-router';
import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
import { VForm } from 'vuetify/components/VForm';
import { useStore } from 'vuex';
const route = useRoute();
const isMobile = ref(window.innerWidth <= 768);
const store = useStore()
const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
})
const states = ref([
    { name: 'Alabama', abbreviation: 'AL' },
    { name: 'Alaska', abbreviation: 'AK' },
    { name: 'Arizona', abbreviation: 'AZ' },
    { name: 'Arkansas', abbreviation: 'AR' },
    { name: 'Howland Island', abbreviation: 'UM-84' },
    { name: 'Delaware', abbreviation: 'DE' },
    { name: 'Maryland', abbreviation: 'MD' },
    { name: 'Baker Island', abbreviation: 'UM-81' },
    { name: 'Kingman Reef', abbreviation: 'UM-89' },
    { name: 'New Hampshire', abbreviation: 'NH' },
    { name: 'Wake Island', abbreviation: 'UM-79' },
    { name: 'Kansas', abbreviation: 'KS' },
    { name: 'Texas', abbreviation: 'TX' },
    { name: 'Nebraska', abbreviation: 'NE' },
    { name: 'Vermont', abbreviation: 'VT' },
    { name: 'Jarvis Island', abbreviation: 'UM-86' },
    { name: 'Hawaii', abbreviation: 'HI' },
    { name: 'Guam', abbreviation: 'GU' },
    { name: 'United States Virgin Islands', abbreviation: 'VI' },
    { name: 'Utah', abbreviation: 'UT' },
    { name: 'Oregon', abbreviation: 'OR' },
    { name: 'California', abbreviation: 'CA' },
    { name: 'New Jersey', abbreviation: 'NJ' },
    { name: 'North Dakota', abbreviation: 'ND' },
    { name: 'Kentucky', abbreviation: 'KY' },
    { name: 'Minnesota', abbreviation: 'MN' },
    { name: 'Oklahoma', abbreviation: 'OK' },
    { name: 'Pennsylvania', abbreviation: 'PA' },
    { name: 'New Mexico', abbreviation: 'NM' },
    { name: 'American Samoa', abbreviation: 'AS' },
    { name: 'Illinois', abbreviation: 'IL' },
    { name: 'Michigan', abbreviation: 'MI' },
    { name: 'Virginia', abbreviation: 'VA' },
    { name: 'Johnston Atoll', abbreviation: 'UM-67' },
    { name: 'West Virginia', abbreviation: 'WV' },
    { name: 'Mississippi', abbreviation: 'MS' },
    { name: 'Northern Mariana Islands', abbreviation: 'MP' },
    { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
    { name: 'Massachusetts', abbreviation: 'MA' },
    { name: 'Connecticut', abbreviation: 'CT' },
    { name: 'Florida', abbreviation: 'FL' },
    { name: 'District of Columbia', abbreviation: 'DC' },
    { name: 'Midway Atoll', abbreviation: 'UM-71' },
    { name: 'Navassa Island', abbreviation: 'UM-76' },
    { name: 'Indiana', abbreviation: 'IN' },
    { name: 'Wisconsin', abbreviation: 'WI' },
    { name: 'Wyoming', abbreviation: 'WY' },
    { name: 'South Carolina', abbreviation: 'SC' },
    { name: 'South Dakota', abbreviation: 'SD' },
    { name: 'Montana', abbreviation: 'MT' },
    { name: 'North Carolina', abbreviation: 'NC' },
    { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
    { name: 'Puerto Rico', abbreviation: 'PR' },
    { name: 'Colorado', abbreviation: 'CO' },
    { name: 'Missouri', abbreviation: 'MO' },
    { name: 'New York', abbreviation: 'NY' },
    { name: 'Maine', abbreviation: 'ME' },
    { name: 'Tennessee', abbreviation: 'TN' },
    { name: 'Georgia', abbreviation: 'GA' },
    { name: 'Louisiana', abbreviation: 'LA' },
    { name: 'Nevada', abbreviation: 'NV' },
    { name: 'Iowa', abbreviation: 'IA' },
    { name: 'Idaho', abbreviation: 'ID' },
    { name: 'Rhode Island', abbreviation: 'RI' },
    { name: 'Washington', abbreviation: 'WA' },
    { name: 'Ohio', abbreviation: 'OH' },
    // ... (add the rest of the states)
]);
const checkMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};
const prescription_id = ref([]);
const sortedStates = computed(() => {
    return states.value.slice().sort((a, b) => {
        return a.name.localeCompare(b.name);
    });
});
const valid = ref(false);
const form = ref(null);
const getFieldRules = (fieldName, errorMessage) => {
    if (fieldName) {
        return [
            (v) => !!v || `${errorMessage}`,
            // Add more validation rules as needed
        ];
    }
};
const headers = [

    { key: 'name', title: 'Name' },
    { key: 'brand', title: 'Brand' },
    { key: 'from', title: 'From' },
    { key: 'direction_quantity', title: 'Direction Quantity' },
    { key: 'dosage', title: 'Dosage' },
    { key: 'quantity', title: 'Quantity' },
    { key: 'refill_quantity', title: 'Refill Quantity' },
    { key: 'actions', title: 'Action' },
];
const openDialog = (user, type) => {
    console.log("userId", user);
 
  
    if (type == "Prescription") {
        console.log("enter ne value");
        prescriptionModel.value = true;
    }
    if (type == "Prescription Form") {
        console.log("enter ne value");
        prescriptionModelForm.value = true;
    }
 
};
const prescriptionForm = async () => {
    console.log("toggelUserValue.value.", prescription_id.value);
    // isLoadingVisible.value = true
    if (form.value.validate()) {
  
        
         await store.dispatch("savePercriptionOrder", {
            medicines: medicines.value,
            prescription_id: prescription_id.value,
            order_id:route.params.id,
            brand: brand.value,
            from: from.value,
            dosage: dosage.value,
            quantity: quantity.value,
            direction_quantity: direction_quantity.value,
            refill_quantity: refil_quantity.value,
            dont_substitute: dont_substitute.value,
            
         });
        if (!store.getters.getErrorMsg) {
      emit('addedMessage', 'success')
               prescriptionModel.value = false;
                medicines.value = null;
                prescription_id.value = null;
                brand.value = null;
                from.value = null;
                dosage.value = null;
                quantity.value = null;
                direction_quantity.value = null;
                direction_one.value = null;
                direction_two.value = null;
                refil_quantity.value = null;
                dont_substitute.value = null;
                comments.value = null;
                emit('update:isDrawerOpen', false)
    }
   
      
      
       
       
    }
};

const emit = defineEmits(['update:isDrawerOpen','addedMessage'])

const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen', val)
}
const genders = ref([
  { name: 'Male', abbreviation: 'Male' },
  { name: 'Female', abbreviation: 'Female' },
  { name: 'Other', abbreviation: 'Other' },
]);
const prescriptionModel = ref(false);
const prescriptionModelForm = ref(false);
const selectedMedicines = ref([]);
const toggelUserValue = ref(null)
const medicines = ref("");
const brand = ref("");
const from = ref("");
const dosage = ref("");
const quantity = ref("");
const direction_quantity = ref("");
const direction_one = ref("");
const direction_two = ref("");
const refil_quantity = ref("");
const dont_substitute = ref("");
const comments = ref("");
const search = ref("");
const loading = ref(true);
const page = ref(1);
const itemsPerPage = ref(10);
const pageCount = ref(0);
const itemsPrescriptions = ref([]);

const isBillingAddress = ref(false)



const selectedItem = async (item) => {
    console.log(item)
    medicines.value = item.name
    brand.value = item.brand
    dosage.value = item.dosage
    dosage.value = item.dosage
    from.value = item.from
    quantity.value = item.quantity
    direction_quantity.value = item.direction_quantity
    refil_quantity.value = item.refill_quantity
    prescription_id.value = item.id
    prescriptionModelForm.value = false

}
  onMounted(async () => {
 
});
const resetForm = () => {
  refVForm.value?.reset()
  emit('update:isDrawerOpen', false)
}

</script>

<template>
  <VNavigationDrawer
    :model-value="props.isDrawerOpen"
    temporary
    location="end"
    width="800"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <!-- 👉 Header -->
    <AppDrawerHeaderSection
      title="Add Prescription"
      @cancel="$emit('update:isDrawerOpen', false)"
    />
    <VDivider />

    <VCard flat>
      <PerfectScrollbar
        :options="{ wheelPropagation: false }"
        class="h-100"
      >
        <VCardText style="block-size: calc(100vh - 5rem);">
          <VForm
            ref="refVForm"
            @submit.prevent=""
          >
      
             
           
            <v-form ref="form" v-model="valid" class="mt-6">
                <v-row>
                    <v-col cols="12" md="2" v-if="isMobile" style="display: none;">
                        <v-btn
                            color="primary"
                            class="btn"
                            style="height: 54px"
                            @click.stop="
                                openDialog(toggelUserValue, 'Prescription Form')
                            "
                        >
                            Prescription
                        </v-btn>
                    </v-col>
                    <v-col cols="12" md="12">
                        <v-text-field
                            label="Medicine"
                            :rules="
                                getFieldRules(
                                    'Medicine',
                                    'Medicine is required'
                                )
                            "
                            v-model="medicines"
                            required
                        ></v-text-field>
                    </v-col>
                    <v-col cols="12" md="2" v-if="!isMobile" style="display: none;">
                        <v-btn
                            color="primary"
                            class="btn"
                            style="height: 54px"
                            @click.stop="
                                openDialog(toggelUserValue, 'Prescription Form')
                            "
                        >
                            Prescription
                        </v-btn>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12" md="6">
                        <v-text-field
                            label="Brand"
                            :rules="getFieldRules('brand', 'Brand is required')"
                            v-model="brand"
                            required
                        ></v-text-field>
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field
                            label="From"
                            :rules="getFieldRules('from', 'From is required')"
                            v-model="from"
                            required
                        ></v-text-field>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12" md="6">
                        <v-text-field
                            label="Dosage"
                            :rules="
                                getFieldRules('dosage', 'Dosage is required')
                            "
                            v-model="dosage"
                            required
                        ></v-text-field>
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field
                            label="Quantity"
                            :rules="
                                getFieldRules(
                                    'quantity',
                                    'Quantity is required'
                                )
                            "
                            v-model="quantity"
                            required
                        ></v-text-field>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12" md="6">
                        <v-text-field
                            label="Direction Quantity"
                            :rules="
                                getFieldRules(
                                    'direction quantity',
                                    'Direction Quantity is required'
                                )
                            "
                            v-model="direction_quantity"
                            required
                        ></v-text-field>
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field
                            label="Refil Quantity"
                            :rules="
                                getFieldRules(
                                    'Refil Quantity',
                                    'Refil Quantity one is required'
                                )
                            "
                            v-model="refil_quantity"
                            required
                        ></v-text-field>
                    </v-col>
                </v-row>
                

               
            </v-form>
           
    

             
      <VRow>
              <VCol cols="12">
                <div class="d-flex justify-start">
                  <VBtn
                    type="submit"
                    color="primary"
                    class="me-4"
                    @click="prescriptionForm"
                        :disabled="!valid"
                  >
                    Save
                  </VBtn>
                  <VBtn
                    color="error"
                    variant="outlined"
                    @click="resetForm"
                  >
                    Discard
                  </VBtn>
                </div>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </PerfectScrollbar>
    </VCard>
  </VNavigationDrawer>
     <v-dialog v-model="prescriptionModelForm" max-width="1200">
        <v-card class="pa-3">
            <v-row>
                <v-col cols="12" class="text-right cross">
                    <v-btn
                        icon
                        color="transparent"
                        small
                        @click="prescriptionModelForm = false"
                    >
                        <v-icon>rdi-close</v-icon>
                    </v-btn>
                </v-col>
            </v-row>
            <v-row>
                <v-col cols="12" md="12">
                    <v-data-table
                        :headers="headers"
                        :items="itemsPrescriptions"
                        :search="search"
                        :loading="loading"
                        :page.sync="page"
                        :items-per-page.sync="itemsPerPage"
                        @page-count="pageCount = $event"
                        class="elevation-1"
                    >
                        <template v-slot:top>
                            <v-toolbar flat :height="30">
                                <v-toolbar-title>Prescriptions</v-toolbar-title>
                                <v-divider
                                    class="mx-4"
                                    inset
                                    vertical
                                ></v-divider>
                                <v-spacer></v-spacer>
                                <v-text-field
                                    v-model="search"
                                    label="Search"
                                    single-line
                                    hide-details
                                ></v-text-field>
                            </v-toolbar>
                        </template>
                        <template v-slot:item.actions="{ item }">
                            <v-btn
                                color="primary"
                                small
                                @click="selectedItem(item)"
                                >Select</v-btn
                            >
                        </template>
                    </v-data-table>
                </v-col>
            </v-row>
        </v-card>
    </v-dialog>
</template>

<style lang="scss">
.v-navigation-drawer__content {
  overflow-y: hidden !important;
}
</style>
