import PocketBase from 'pocketbase'
import { ChangeEvent, useEffect, useState } from 'react'
import QuoteInfo from './QuoteInfo.tsx'
import { Collections, Quote, TypedPocketBase } from './pocketbase-types.ts'
import FilterIcon from "pixelarticons/svg/sliders-2.svg?react"
import AddIcon from "pixelarticons/svg/note-plus.svg?react"
//TODO: Add Comments

export default function QuoteList() {

  // const { quotes, loading, error } = getAllQuotes(collection)
  const pb = new PocketBase("https://api.m3.fyi") as TypedPocketBase

  const [quotes, setQuotes] = useState<Quote[] | null>(null)
  const [filteredQuotes, setFilteredQuotes] = useState<Quote[] | null>(null)
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<Error | null>(null)
  const [collection, setCollection] = useState<Collections | null>(Collections.QtBit)
  const [searchItem, setSearchItem] = useState<string | null>(null)

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const searchTerm = e.target.value;
    setSearchItem(searchTerm)

    const filteredItems = quotes?.filter((quote) => quote.quote.toLowerCase().includes(searchTerm.toLowerCase()));
    setFilteredQuotes(filteredItems!)
  }

  useEffect(() => {
    pb.realtime.subscribe(`${collection}`, function (e) {
      console.log("realtime", e.record);
      let x = quotes!.filter((quote) => quote.id !== e.record.id);
      setQuotes([e.record, ...x])
      setFilteredQuotes([e.record, ...x])
    });
    return () => {
      pb.realtime.unsubscribe();
    }
  })
  const getQuotes = async () => {
    try {
      const records = await pb.collection(`${collection}`).getFullList<Quote>({ sort: "-created", requestKey: null });
      setQuotes(records);
      setFilteredQuotes(records);
    } catch (err: any) {
      setError(err)
      console.error("Error:", error)
    } finally {
      setLoading(false)
    }
  }
  useEffect(() => {
    getQuotes()
  }, [collection])

  return (
    //TODO: Add Quote source selection
    <div className='p-3 pt-0'>
      <div className='border-2 bg-slate-800 ml-2 mb-5 p-2 border-lime-500 shadow-(--box) flex flex-row'>
        <select
          title='Select quote collection'
          className='pr-10 bg-slate-700'
          value={collection as string}
          onChange={e => setCollection(e.target.value as Collections)}>
          <option value="qt_bit">Arcus Notsus</option>
          <option value="qt_kfk">Kaffeeklatsch</option>
          <option value="qt_theshegays">TheSheGays</option>
        </select>
        <p className='text-lime-500'>|</p>
        <div className='pl-2 flex flex-row'>
          <input
            title='Search for quote'
            placeholder='Search...'
            value={searchItem as string}
            onChange={e => handleInputChange(e)}
            className='placeholder:text-slate-400 bg-slate-700' />
          <button type="button" className='cursor-pointer' title='Filter search'>
            <FilterIcon className="w-5 mx-1 active:text-lime-500" />
          </button>
        </div>
        <p className='text-lime-500'>|</p>
        <button type='button' className='cursor-pointer ml-auto' title='Add new quote'>
          <AddIcon className="w-5 mx-1 active:text-lime-500" />
        </button>
        <p className='text-lime-500'>|</p>
      </div>
      {loading ? (<p> Loading...</p >) : (
        //TODO: Replace div with styled QuoteInfo component
        <div className="grid grid-cols-4 gap-4">
          {/* {filteredQuotes.map(quote => <QuoteInfo key={quote.id} quote={quote}/>)} */}
          {/* {quotes != null ? (quotes.map((quote) => (<div key={quote.id}>{quote.quote}</div>))) : (<p>No Quotes</p>)} */}
          {filteredQuotes != null ? (filteredQuotes.map((quote) => (<QuoteInfo key={quote.id} quote={quote} />))) : (<p>No Quotes</p>)}
        </div>
      )
      }
    </div>

  )
}