import odooApi from '@/core/api/odooApi'
import { createSlug } from '@/core/utils/slug'
import whatsappUrl from '@/core/utils/whatsappUrl'
import { Button, Spinner } from 'flowbite-react'
import { memo, useEffect, useState } 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>
        {dataSLA.isFetching ? (
          <div className='text-center'>
            <Spinner aria-label='Center-aligned spinner example' />
          </div>
        ) : 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>
        )}
      </td>
      <td className='flex justify-center'>
        {dataSLA.isFetching ? (
          <Button color='gray'>
            <Spinner aria-label='Alternate spinner button example' />
            <span className='pl-3'>Loading...</span>
          </Button>
        ) : dataSLA?.data?.slaDate != '-' ? (
          <button
            type='button'
            title={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}
            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
              dataSLA?.data?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
            }`}
          >
            <div
              className={`flex-1 text-caption-1  ${
                dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''
              }`}
            >
              {dataSLA?.data?.slaDate}
            </div>
            <div className='flex-end'>
              <svg
                aria-hidden='true'
                fill='none'
                stroke='currentColor'
                stroke-width='1.5'
                className={`w-7 h-7 ${dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''}`}
              >
                <path
                  d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
                  stroke-linecap='round'
                  stroke-linejoin='round'
                ></path>
              </svg>
            </div>
          </button>
        ) : (
          '-'
        )}
      </td>
    </>
  )
}

export default memo(ColumnSLA)