<template>
  <company-block
    :company
    title="company_edit__title_card"
    btnText="company_edit__btn"
    @update="updateCompany"
    >
    <template #myCompany v-if="company.is_own">
      <div class="q-mb-md column w100 items-center">
        <div class="flex items-center text-amber-10">
          <q-icon name="star" class="q-pr-xs"/>
          {{ $t('company_edit__my_company') }}
        </div>

        <div class="text-caption text-primary cursor-pointer text-center" @click="goMyCompany">
          {{ $t('company_edit__my_company_href') }}
        </div>
      </div>
    </template>
  </company-block>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import companyBlock from 'components/companyBlock.vue'
  import { useCompaniesStore } from 'stores/companies'
  import { parseIntString } from 'utils/helpers'
  import type { CompanyParams } from 'types/Company'

  const router = useRouter()
  const route = useRoute()
  const companiesStore = useCompaniesStore()

  const companyId = computed(() => parseIntString(route.params.companyId))

  const company = companyId.value && companiesStore.companyById(companyId.value) || {} as CompanyParams

  async function goMyCompany () {
    await router.replace({ name: 'your_company' })
  }

  async function updateCompany (company: CompanyParams) {
    if (!companyId .value || !company) return
    await companiesStore.update(companyId.value, company)
    router.go(-1)
  }

</script>
