import odooApi from '@/core/api/odooApi'
import Spinner from '@/core/components/elements/Spinner/Spinner'
import { useCallback, useEffect, useState } from 'react'
import BrandCard from './BrandCard'

const Brands = () => {
  const alpha = Array.from(Array(26)).map((e, i) => i + 65)
  const alphabets = alpha.map((x) => String.fromCharCode(x))

  const [isLoading, setIsLoading] = useState(true)
  const [startWith, setStartWith] = useState(null)
  const [manufactures, setManufactures] = useState([])

  const loadBrand = useCallback(async () => {
    setIsLoading(true)
    const name = startWith ? `${startWith}%` : ''
    const result = await odooApi(
      'GET',
      `/api/v1/manufacture?limit=0&offset=${manufactures.length}&name=${name}`
    )
    setIsLoading(false)
    setManufactures((manufactures) => [...manufactures, ...result.manufactures])
  }, [startWith])

  const toggleStartWith = (alphabet) => {
    setManufactures([])
    if (alphabet == startWith) {
      setStartWith(null)
      return
    }
    setStartWith(alphabet)
  }

  useEffect(() => {
    loadBrand()
  }, [loadBrand])

  if (isLoading) {
    return (
      <div className='flex justify-center my-4'>
        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
      </div>
    )
  }

  return (
    <div className='p-4'>
      <h1 className='font-semibold'>Semua Brand di Indoteknik</h1>
      <div className='flex overflow-x-auto gap-x-2 py-2'>
        {alphabets.map((alphabet, index) => (
          <button
            key={index}
            className={
              'p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0' +
              (startWith == alphabet ? ' !bg-yellow_r-9 border-yellow_r-9 ' : '')
            }
            type='button'
            onClick={() => toggleStartWith(alphabet)}
          >
            {alphabet}
          </button>
        ))}
      </div>

      <div className='grid grid-cols-4 gap-4 mt-4 !overflow-x-hidden'>
        {manufactures?.map(
          (manufacture, index) =>
            manufacture.name && (
              <BrandCard
                brand={manufacture}
                key={index}
              />
            )
        )}
      </div>
    </div>
  )
}

export default Brands