'use client'
import { useState } from 'react'
import InquiryItems from './InquiryItems'
import InquiryFilter from './InquiryFilter'
import LoadMoreButton from '../LoadMoreButton'

const inquiryDummyData = [
  {
    id: 1,
    title: 'post',
    content: 'content',
    file: 'file.png',
    createdAt: '2024-01-01',
    writer: 'writer',
    category: 'A',
  },
  {
    id: 2,
    title: 'post',
    content: 'content',
    file: 'file.png',
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'B',
  },
  {
    id: 3,
    title: 'post',
    content: 'content',
    file: null,
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'C',
  },
  {
    id: 4,
    title: 'post',
    content: 'content',
    file: null,
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'A',
  },
  {
    id: 5,
    title: 'post',
    content: 'content',
    file: null,
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'B',
  },
  {
    id: 6,
    title: 'post',
    content: 'content',
    file: null,
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'C',
  },
  {
    id: 7,
    title: 'post',
    content: 'content',
    file: 'file.png',
    createdAt: '2024-01-01',
    writer: 'writer',
    category: 'A',
  },
  {
    id: 8,
    title: 'post',
    content: 'content',
    file: 'file.png',
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'B',
  },
  {
    id: 9,
    title: 'post',
    content: 'content',
    file: null,
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'C',
  },

  {
    id: 10,
    title: 'post',
    content: 'content',
    file: 'file.png',
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'A',
  },
  {
    id: 11,
    title: 'post',
    content: 'content',
    file: 'file.png',
    createdAt: '2024-01-01',
    writer: 'writer',
    category: 'B',
  },
  {
    id: 12,
    title: 'post',
    content: 'content',
    file: null,
    createdAt: '2024-01-01',
    writer: 'writer1',
    category: 'C',
  },
]

export default function InquiryList() {
  const [visibleItems, setVisibleItems] = useState(5)
  const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
  const [category, setCategory] = useState('')
  const [search, setSearch] = useState('')
  const [hasMore, setHasMore] = useState(inquiryDummyData.length > 5)

  const inquriyData = () => {
    if (isMyPostsOnly) {
      return inquiryDummyData.filter((item) => item.writer === 'writer')
    }
    if (category.trim().length > 0) {
      return inquiryDummyData.filter((item) => item.category === category)
    }
    if (search.trim().length > 0) {
      return inquiryDummyData.filter((item) => item.title.includes(search))
    }
    return inquiryDummyData
  }

  const handleLoadMore = () => {
    const newVisibleItems = Math.min(visibleItems + 5, inquriyData().length)
    setVisibleItems(newVisibleItems)
    setHasMore(newVisibleItems < inquriyData().length)
  }

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value)
  }

  const handleScrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <div className="flex flex-col gap-2">
      <InquiryFilter handleSearch={handleSearch} />
      <div className="flex items-center gap-2">
        <input type="checkbox" id="myPosts" checked={isMyPostsOnly} onChange={(e) => setIsMyPostsOnly(e.target.checked)} />
        <label htmlFor="myPosts">my posts</label>
      </div>
      <select onChange={(e) => setCategory(e.target.value)}>
        <option value="">All</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <span>total {inquriyData().length}</span>
      <InquiryItems inquiryData={inquriyData().slice(0, visibleItems)} />
      <LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
    </div>
  )
}