import { reactive, ref } from 'vue'

export const functions_store = reactive({
  functions: ref(
    [] as Array<{
      name: string
      tags: {
        id: string
        created_at: string
        updated_at: string
        deleted_at: string
        name: string
      }[]
      requirements: {
        id: string
        created_at: string
        updated_at: string
        deleted_at: string
        name: string
      }[]
    }>,
  ),
})

export function update_functions() {
  fetch('http://localhost:31337/get/functions', {
    credentials: 'include',
  })
    .then((res) => {
      res
        .json()
        .then((functionsjson) => {
          functions_store.functions = functionsjson.functions
        })
        .catch(() => {})
    })
    .catch(() => {})
}

export function add_function(
  function_name: string,
  function_tags: string[],
  function_requirements: string[],
) {
  const post_url = new URL('http://localhost:31337/post/function')
  const search_params = new URLSearchParams()
  search_params.append('name', function_name)
  function_tags.forEach((tag) => {
    search_params.append('tags', tag)
  })
  if (function_requirements.length > 0 && function_requirements[0] != 'undefined') {
    function_requirements.forEach((requirement) => {
      search_params.append('requirements', requirement)
    })
  }
  post_url.search = search_params.toString()
  fetch(post_url, {
    credentials: 'include',
    method: 'POST',
    body: JSON.stringify({
      name: function_name,
      tags: function_tags,
      requirements: function_requirements,
    }),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => {
      if (res.status === 400) {
        console.log('Function submitted is invalid.')
      } else if (res.status === 401) {
        console.log("You aren't logged in.")
      } else {
        update_functions()
      }
    })
    .catch(() => {})
}