// React Imports
import { useState, useEffect } from 'react'

// MUI Imports
import CardContent from '@mui/material/CardContent'
import Grid from '@mui/material/Grid2'
import MenuItem from '@mui/material/MenuItem'

// Type Imports
import type { VendorType } from '@/types/apps/vendorTypes'

// Component Imports
import CustomTextField from '@core/components/mui/TextField'

const TableFilters = ({ setData, tableData }: { setData: (data: VendorType[]) => void; tableData?: VendorType[] }) => {
  // States
  const [company, setCompany] = useState('')
  const [payableRange, setPayableRange] = useState('')
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    const filteredData = tableData?.filter(vendor => {
      // Filter by company type
      if (company && !vendor.company.toLowerCase().includes(company.toLowerCase())) return false

      // Filter by payable range (You Payable)
      if (payableRange) {
        const payable = vendor.youPayable
        switch (payableRange) {
          case 'low':
            if (payable >= 20000000) return false
            break
          case 'medium':
            if (payable < 20000000 || payable >= 35000000) return false
            break
          case 'high':
            if (payable < 35000000) return false
            break
        }
      }

      // Filter by search term (name, company, email)
      if (searchTerm) {
        const search = searchTerm.toLowerCase()
        const matchesName = vendor.name.toLowerCase().includes(search)
        const matchesCompany = vendor.company.toLowerCase().includes(search)
        const matchesEmail = vendor.email.toLowerCase().includes(search)

        if (!matchesName && !matchesCompany && !matchesEmail) return false
      }

      return true
    })

    setData(filteredData || [])
  }, [company, payableRange, searchTerm, tableData, setData])

  return (
    <CardContent>
      <Grid container spacing={6}>
        <Grid size={{ xs: 12, sm: 4 }}>
          <CustomTextField
            select
            fullWidth
            id='select-company'
            value={company}
            onChange={e => setCompany(e.target.value)}
            slotProps={{
              select: { displayEmpty: true }
            }}
          >
            <MenuItem value=''>Pilih Jenis Perusahaan</MenuItem>
            <MenuItem value='PT'>PT (Perseroan Terbatas)</MenuItem>
            <MenuItem value='CV'>CV (Commanditaire Vennootschap)</MenuItem>
            <MenuItem value='UD'>UD (Usaha Dagang)</MenuItem>
          </CustomTextField>
        </Grid>
        <Grid size={{ xs: 12, sm: 4 }}>
          <CustomTextField
            select
            fullWidth
            id='select-payable-range'
            value={payableRange}
            onChange={e => setPayableRange(e.target.value)}
            slotProps={{
              select: { displayEmpty: true }
            }}
          >
            <MenuItem value=''>Pilih Rentang Hutang</MenuItem>
            <MenuItem value='low'>Rendah (&lt; 20M)</MenuItem>
            <MenuItem value='medium'>Sedang (20M - 35M)</MenuItem>
            <MenuItem value='high'>Tinggi (&gt; 35M)</MenuItem>
          </CustomTextField>
        </Grid>
        <Grid size={{ xs: 12, sm: 4 }}>
          <CustomTextField
            fullWidth
            id='search-vendor'
            placeholder='Cari berdasarkan nama, perusahaan, atau email'
            value={searchTerm}
            onChange={e => setSearchTerm(e.target.value)}
          />
        </Grid>
      </Grid>
    </CardContent>
  )
}

export default TableFilters
