import { observer } from 'mobx-react'
import React from 'react'

import useStores from 'dbaas/stores/useStores'
import countriesData from 'dbaas/utils/countriesData'

export const ContactUsLink: React.FC<
  React.PropsWithChildren<{ text?: string; help?: 'Product' | 'Training' | 'Pricing' | 'Partnerships' }>
> = observer(({ text = 'contact us', help }) => {
  const {
    store: { userProfile, tenantData }
  } = useStores()

  const params = [
    { key: 'company', value: tenantData.name },
    { key: 'firstname', value: userProfile.first_name },
    { key: 'lastname', value: userProfile.last_name },
    { key: 'email', value: userProfile.email },
    { key: 'phone', value: userProfile.phone_number },
    { key: 'how_can_we_help_you_', value: help || '' },
    {
      key: 'contact_country',
      value:
        countriesData.find((it) => {
          return it.value === tenantData.country
        })?.text || ''
    }
  ]
    .map((it) => {
      return `${it.key}=${encodeURIComponent(it.value || '')}`
    })
    .join('&')

  return (
    <a href={`https://www.pingcap.com/contact-us/?${params}`} target="_blank" rel="noreferrer">
      {text}
    </a>
  )
})