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

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}*` : ''
    //Get brand from odoo
    /*const result = await odooApi(
      'GET',
      `/api/v1/manufacture?limit=0&offset=${manufactures.length}&name=${name}`
    )*/

    // Change get brands from solr
    const result = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?params=${name}`)
    
    setIsLoading(false)
    setManufactures((manufactures) => [...result.data])
  }, [startWith])

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

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

  if (isLoading) {
    return (
      <>
        <div className='container flex justify-center my-4'>
          <LogoSpinner width={48} height={48} />
        </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-warning-500 border-warning-500 ' : '')
            }
            type='button'
            onClick={() => toggleStartWith(alphabet)}
          >
            {alphabet}
          </button>
        ))}
      </div>

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

export default Brands