// import { useMyFetch } from '#imports'

import type { CalculatorOutput, GenericResponse } from '~/types'

export const useInvestmentStore = defineStore('investmentStore', () => {
  const store = useStore()
  // const monthlySavings = ref(store.monthlySavings || 100)
  // const yearsNumber = ref(store.storagePeriod || 10)

  const calculationResult = ref<CalculatorOutput>({} as CalculatorOutput)

  const minYear = 1
  const maxYear = 20

  const { $session: session } = useNuxtApp()
  watch(session.cookieData, async () => {
    await getCalculator()
  }, { deep: true })

  const getCalculator = async () => {
    const query = new URLSearchParams({
      monthly_deposit: String(store.monthlySavings),
      years: String(store.storagePeriod),
      format: 'svg',
      grid: 'false',
      legend: 'false',
      title: 'false',
      ingots_bought_dots: 'true',
      draw_linear: 'true',
      annotations: 'false',
      show_real_value: 'false',
      series_stroke_width: '1',
      // colors: '#004f3d,#004f3d,#004f3d,#004f3d,#000',
      colors: '#9a7f62,#9a7f62,#9a7f62,#9a7f62,#000',
    })

    const { data } = await useMyFetch<GenericResponse<CalculatorOutput>>(`/api/public/plan-prediction/easy/chart?${query.toString()}`)
    calculationResult.value = data
  }

  return {
    // monthlySavings,
    // yearsNumber,
    minYear,
    maxYear,
    calculationResult,
    getCalculator,
  }
})