< script lang = "ts" >
  import my_store from '$lib/Store'
import {
  get
} from 'svelte/store';
import {
  page
} from '$app/stores';

$: tokenString = '';
my_store.subscribe((data) => {
  tokenString = get(my_store).token;
  console.log('subscribed value' + tokenString);//able to see the actual value here 
});

function fetchFlights() {
  alert(get(my_store).token);// not able to see the value when i click the button in alert
}
/**
 * @type {boolean}
 */
// @ts-ignore
export let showModalFlight; // boolean
// @ts-ignore
/**
 * @type {HTMLDialogElement}
 */
let dialog; // HTMLDialogElement
// @ts-ignore
// @ts-ignore
let type;

// @ts-ignore
// @ts-ignore
$: if (dialog && showModalFlight) dialog.showModal();



<
/script>

<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
<
dialog
bind: this = {
  dialog
}
on: close = {
  () => (showModalFlight = false)
}
on: click | self = {
    () => dialog.close()
  } >
  <!-- svelte-ignore a11y-no-static-element-interactions -->

  <
  div on: click | stopPropagation class = "flightbar" > {
    JSON.stringify($page)
  }



  <
  div class = "outerTry" >
  <
  div class = "upperDiv" >
  <
  div class = "typeOfTrip" >
  <
  input type = "radio"
id = "oneWay"
name = "age"
value = "30" >
  <
  label
for = "age1" > One Way < /label><br> <
  input type = "radio"
id = "roundTrip"
name = "age"
value = "60" >
  <
  label
for = "age2" > Round Trip < /label><br>          <
  /div> <
  /div> <
  div class = "lowerDiv" >
  <
  div class = "input_place" >
  <
  span class = "fa fa-map-marker location-icon fromIcon"
style = "font-size:24px" > < /span> <
  input type = "search"
placeholder = "From Where?"
class = "from-where-input" >
  <
  /div> <
  div class = "input_place" >
  <
  span class = "fa fa-map-marker location-icon fromIcon"
style = "font-size:24px" > < /span> <
  input type = "search"
placeholder = "To Where?"
class = "from-where-input" >
  <
  /div> <
  div class = "date_control" >
  <
  div class = "heading-type-date" > < span > Departure < /span></div >
  <
  div class = "actual-date" >
  <
  span class = "day" > 15 < /span> <
  span class = "month" > Apr '24</span> <
  /div> <
  /div> <
  div class = "date_control" >
  <
  div class = "heading-type-date" > < span > Return < /span></div >
  <
  div class = "actual-date" >
  <
  span class = "day" > 15 < /span> <
  span class = "month" > Apr '24</span> <
  /div> <
  /div> <
  button class = "btn"
on: click = {
    () => fetchFlights()
  } > Find Flights < /button>

  <
  /div> <
  /div> <
  /div> <
  /dialog>

  <
  style >
  .outerTry {
    display: grid;
    grid - template - rows: auto auto;
    grid - template - columns: auto;
  }

  .typeOfTrip {
    display: flex;

    margin: 10 px;
    font - size: 18 px;
    font - family: 'Lexend',
    sans - serif;

  }
  .lowerDiv {
    display: grid;
    grid - template - columns: auto auto auto auto auto;
    grid - template - rows: auto;
  }

  .date_control {
    display: grid;
    grid - template - rows: auto auto;
    font - size: 18 px;
    font - family: 'Lexend',
    sans - serif;
    color: #333333; 
        text-align: center;
        align-items: center;
        
        margin-right: 10px;
        margin-bottom: 15px;
        width:100px;
    }

    .lowerDiv input{
        font-size: 25px;
        font-family: 'Lexend',sans-serif;
        color: # 333333;
    margin - left: 14 px;
    width: 230 px;
    outline: none;
    background: transparent;
    border: none;
  }

  .heading - type - date {
    display: block;
    margin: 5 px;
  }

  .input_place {
    display: inline - block;
    margin - top: 7 px;
  }





dialog {
  border - radius: 28 px;
  border: none;
  padding: 0;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

dialog[open] {
  animation: zoom 0.3 s cubic - bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoom {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}
dialog[open]::backdrop {
  animation: fade 0.2 s ease - out;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.btn {
  border: 1 px;
  background - color: green;
  color: black;
  padding: 10 px 28 px;
  padding - right: 20 px;
  font - size: 16 px;
  cursor: pointer;
  border - top - right - radius: 28 px;
  border - bottom - right - radius: 28 px;
  font - size: 25 px;
}





.fromIcon {
  margin - left: 15 px;
}




<
/style>

import { amedeus_client_id } from '$env/static/private';
import { amedeus_secret } from '$env/static/private';
import $my_store from '$lib/Store'
import { get } from 'svelte/store';
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

const urlencoded = new URLSearchParams();
urlencoded.append("grant_type", "client_credentials");
urlencoded.append("client_id", amedeus_client_id);
urlencoded.append("client_secret", amedeus_secret);

function getToken():any{
    let data;
    const requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: urlencoded,
        redirect: "follow"
      };
      
      fetch("https://test.api.amadeus.com/v1/security/oauth2/token", requestOptions)
        .then((response) => response.text())
        .then((result) => {
            const tokenDetails = JSON.parse(result); 
            data = tokenDetails;
            $my_store.set( {'token': tokenDetails.access_token});
            $my_store.update((data) => {
                return {'token': tokenDetails.access_token}
            });
            console.log('hello'+JSON.stringify(get($my_store)));
          //  console.log(JSON.stringify(token));
          //  token.set(tokenDetails.access_token);  
          //  console.log("printing result : "+token)
        })
        .catch((error) => console.error(error));
        return data;
}

export async function load() {
    return {
      posts:  getToken()
    }
  }

import {
  writable
} from 'svelte/store';

const my_store = writable({
  'token': 'default value'
});



my_store.set({
  'token': ''
});

export default my_store;