<script>
  import ToList from "./toList.svelte";

  const states = {
    approve: 1,
    enter: 2,
  };
  let state = states.approve;

  let error = "";
  let code = "";
  export let number = "+4915...320";
  //export let finish;

  function validateCode() {}

  function sendCode() {
    // Send request to Server
    state = states.enter;
    //finish()
  }
</script>

<style>
  :root {
    --error: red;
  }

  .error {
    color: var(--error);
  }
</style>

<h3>SMS</h3>
{#if state === states.approve}
  <p>Send SMS to {number}</p>
  <button class="btn btn-primary" on:click={sendCode}>Send</button>
{:else}
  <p>A code was sent to you. Please enter</p>
  <input type="number" placeholder="Code" bind:value={code} />
  <button class="btn btn-primary" on:click={validateCode}>Send</button>
  <br />
  <a href="# " on:click|preventDefault={() => (state = states.approve)}>
    Not received?
  </a>
{/if}
<div class="error">{error}</div>

<ToList {finish} />
