import odooApi from '@/core/api/odooApi'
import { createSlug } from '@/core/utils/slug'
import whatsappUrl from '@/core/utils/whatsappUrl'
import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
import { Info } from 'lucide-react'
import { memo } from 'react'
import { useQuery } from 'react-query'

const ColumnSLA = ({ variant, product }) => {
  const fetchSLA = async () => await odooApi('GET', `/api/v1/product_variant/${variant.id}/stock`)
  const dataSLA = useQuery(`VariantSLA-${variant.id}`, fetchSLA, { refetchOnWindowFocus: false })

  return (
    <>
      <td>
        <Skeleton isLoaded={!dataSLA.isFetching} w='full'>
          {dataSLA?.data?.qty > 0 ? (
            dataSLA?.data?.qty
          ) : (
            <a
              href={whatsappUrl('product', {
                name: variant.name,
                manufacture: product.manufacture?.name,
                url: createSlug('/shop/product/', product.name, product.id, true)
              })}
              className='text-danger-500 font-medium'
              target='_blank'
              rel='noreferrer noopener'
            >
              Tanya Admin
            </a>
          )}
        </Skeleton>
      </td>

      <td className='flex justify-center'>
        <Skeleton isLoaded={!dataSLA.isFetching} w='75%'>
          <Tooltip placement='top' label={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}>
            <Box className='border border-gray_r-7 rounded-md p-2 flex justify-center items-center gap-x-2'>
              {dataSLA?.data?.slaDate}
              <Info size={16} />
            </Box>
          </Tooltip>
        </Skeleton>
      </td>
    </>
  )
}

export default memo(ColumnSLA)