import style from '../styles/information.module.css'

import React from 'react'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { useQuery } from 'react-query'

import { IProductDetail } from '~/types/product'
import { IProductVariantSLA } from '~/types/productVariant'
import { createSlug } from '~/libs/slug'
import { getVariantSLA } from '~/services/productVariant'

const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton))

type Props = {
  product: IProductDetail
}

const Information = ({ product }: Props) => {
  const querySLA = useQuery<IProductVariantSLA>({
    queryKey: ['variant-sla', product.variants[0].id],
    queryFn: () => getVariantSLA(product.variants[0].id),
    enabled: product.variant_total === 1
  })

  const sla = querySLA?.data

  return (
    <div className={style['wrapper']}>
      <div className={style['row']}>
        <div className={style['label']}>SKU Number</div>
        <div className={style['value']}>SKU-{product.id}</div>
      </div>
      {/* <div className={style['row']}>
        <div className={style['label']}>Part Number</div>
        <div className={style['value']}>{product.code || '-'}</div>
      </div> */}
      <div className={style['row']}>
        <div className={style['label']}>Manufacture</div>
        <div className={style['value']}>
          {!!product.manufacture.name ? (
            <Link
              href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())}
              className='text-danger-500 hover:underline'
            >
              {product.manufacture.name}
            </Link>
          ) : '-'}
        </div>
      </div>
      {/* <div className={style['row']}>
        <div className={style['label']}>Preparation Time</div>
        <div className={style['value']}>
          {product.variant_total > 1 && 'Lihat Variant'}
          {product.variant_total === 1 && (
            <Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '40px'} h='100%'>
              {sla?.sla_date}
            </Skeleton>
          )}
        </div>
      </div>
      <div className={style['row']}>
        <div className={style['label']}>Stock</div>
        <div className={style['value']}>
          {product.variant_total > 1 && 'Lihat Variant'}
          {product.variant_total === 1 && (
            <Skeleton isLoaded={querySLA.isSuccess} w={querySLA.isSuccess ? '100%' : '10px'} h='100%'>
              {sla?.qty && sla.qty > 0 ? sla?.qty : '-'}
            </Skeleton>
          )}
        </div>
      </div>
      <div className={style['row']}>
        <div className={style['label']}>Weight</div>
        <div className={style['value']}>
          {product.variant_total > 1 && 'Lihat Variant'}
          {product.variant_total === 1 && (product.weight > 0 ? `${product.weight} kg` : '-')}
        </div>
      </div> */}
    </div>
  )
}

export default Information