import {type FunctionComponent, useState} from 'react'
import {useAddArtifact, useGetArtifacts} from '@/api/artifactsApi.ts'
import Artifact from '@/pages/collection/artifact.tsx'
import {PlusIcon} from 'lucide-react'

const CollectionPage: FunctionComponent = () => {
  const {data: artifacts} = useGetArtifacts()
  const {mutate: addArtifact} = useAddArtifact()
  const [eraNameFilter, setEraNameFilter] = useState<string>('')
  const [onDisplay, setOnDisplay] = useState<boolean>(false)
  const filteredArtifacts = artifacts.filter(
    a =>
      (a.name.toLowerCase().includes(eraNameFilter.toLowerCase()) ||
        a.era.toLowerCase().includes(eraNameFilter.toLowerCase())) &&
      (onDisplay ? a.displayStatus === 'On Display' : true),
  )

  return (
    <>
      <div className="artifacts-header">
        <h2>Collectie</h2>

        <button onClick={() => addArtifact()}>
          <PlusIcon /> Artifact toevoegen
        </button>
      </div>

      <div className="filters">
        <input
          type="search"
          placeholder="Zoek artefacten op naam of era..."
          onChange={evt => setEraNameFilter(evt.target.value)}
          value={eraNameFilter}
        />
        <div>
          <label htmlFor="onDisplay">Tentoongesteld:</label>
          <input id="onDisplay" checked={onDisplay} type="checkbox" onChange={() => setOnDisplay(x => !x)} />
        </div>
      </div>

      <div className="artifacts">
        {filteredArtifacts.map(a => (
          <Artifact {...a} key={a.id} />
        ))}
      </div>
    </>
  )
}

export default CollectionPage
