'use client'

import { Chip, CircularProgress, FormControl, InputLabel, MenuItem, OutlinedInput, Select, Stack } from '@mui/material'
import Grid from '@mui/material/Grid2'

import CustomTextField from '@/@core/components/mui/TextField'
import TableFiltersLayout from '@/components/data/TableFiltersLayout'
import type { PaymentLinkStatus, PaymentLinksFilters } from '@/hooks/data/payment-link'

type Translate = (key: string, values?: Record<string, any>) => string

type PaymentLinksFiltersSectionProps = {
  t: Translate
  isFetching: boolean
  activeFiltersCount: number
  resetFilters: () => void
  searchValue: string
  onSearchChange: (value: string) => void
  statusFilter: PaymentLinkStatus[]
  statusOptions: PaymentLinkStatus[]
  statusLabelMap: Record<PaymentLinkStatus, string>
  statusColorMap: Record<PaymentLinkStatus, 'default' | 'warning' | 'success' | 'error'>
  updateParams: (updates: Record<string, string | number | undefined>) => void
  amountMin: string
  amountMax: string
  createdFrom: string
  createdTo: string
  expiresFrom: string
  expiresTo: string
  paidFrom: string
  paidTo: string
  sortBy: PaymentLinksFilters['sort_by']
  sortAs: PaymentLinksFilters['sort_as']
  sortByOptions: PaymentLinksFilters['sort_by'][]
}

const PaymentLinksFiltersSection = ({
  t,
  isFetching,
  activeFiltersCount,
  resetFilters,
  searchValue,
  onSearchChange,
  statusFilter,
  statusOptions,
  statusLabelMap,
  statusColorMap,
  updateParams,
  amountMin,
  amountMax,
  createdFrom,
  createdTo,
  expiresFrom,
  expiresTo,
  paidFrom,
  paidTo,
  sortBy,
  sortAs,
  sortByOptions
}: PaymentLinksFiltersSectionProps) => {
  return (
    <TableFiltersLayout
      searchSlot={
        <CustomTextField
          fullWidth
          label={t('fields.search')}
          placeholder={t('filters.searchPlaceholder')}
          value={searchValue}
          onChange={event => onSearchChange(event.target.value)}
        />
      }
      actionsSlot={isFetching ? <CircularProgress size={20} /> : undefined}
      filters={
        <>
          <Grid size={{ xs: 12, md: 4 }}>
            <InputLabel id='payment-links-status-label'>{t('filters.status')}</InputLabel>
            <Select
              labelId='payment-links-status-label'
              multiple
              size='small'
              className='w-full'
              value={statusFilter}
              onChange={event => updateParams({ status: (event.target.value as string[]).join(','), page: 1 })}
              input={<OutlinedInput />}
              renderValue={selected => (
                <Stack direction='row' spacing={1} flexWrap='wrap'>
                  {(selected as PaymentLinkStatus[]).map(status => (
                    <Chip key={status} size='small' label={statusLabelMap[status]} color={statusColorMap[status]} />
                  ))}
                </Stack>
              )}
            >
              {statusOptions.map(status => (
                <MenuItem key={status} value={status}>
                  <Chip size='small' label={statusLabelMap[status]} color={statusColorMap[status]} />
                </MenuItem>
              ))}
            </Select>
          </Grid>
          <Grid size={{ xs: 12, md: 4 }}>
            <CustomTextField
              fullWidth
              label={t('filters.minAmount')}
              type='number'
              value={amountMin}
              onChange={event => updateParams({ amount_min: event.target.value, page: 1 })}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 4 }}>
            <CustomTextField
              fullWidth
              label={t('filters.maxAmount')}
              type='number'
              value={amountMax}
              onChange={event => updateParams({ amount_max: event.target.value, page: 1 })}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              fullWidth
              label={t('filters.createdFrom')}
              type='date'
              value={createdFrom}
              onChange={event => updateParams({ created_from: event.target.value, page: 1 })}
              slotProps={{ inputLabel: { shrink: true } }}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              fullWidth
              label={t('filters.createdTo')}
              type='date'
              value={createdTo}
              onChange={event => updateParams({ created_to: event.target.value, page: 1 })}
              slotProps={{ inputLabel: { shrink: true } }}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              fullWidth
              label={t('filters.expiresFrom')}
              type='date'
              value={expiresFrom}
              onChange={event => updateParams({ expires_from: event.target.value, page: 1 })}
              slotProps={{ inputLabel: { shrink: true } }}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              fullWidth
              label={t('filters.expiresTo')}
              type='date'
              value={expiresTo}
              onChange={event => updateParams({ expires_to: event.target.value, page: 1 })}
              slotProps={{ inputLabel: { shrink: true } }}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              fullWidth
              label={t('filters.paidFrom')}
              type='date'
              value={paidFrom}
              onChange={event => updateParams({ paid_from: event.target.value, page: 1 })}
              slotProps={{ inputLabel: { shrink: true } }}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              fullWidth
              label={t('filters.paidTo')}
              type='date'
              value={paidTo}
              onChange={event => updateParams({ paid_to: event.target.value, page: 1 })}
              slotProps={{ inputLabel: { shrink: true } }}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              select
              fullWidth
              label={t('filters.sortBy')}
              value={sortBy}
              onChange={event => updateParams({ sort_by: event.target.value, page: 1 })}
            >
              {sortByOptions.map(option => (
                <MenuItem key={option} value={option}>
                  {option}
                </MenuItem>
              ))}
            </CustomTextField>
          </Grid>
          <Grid size={{ xs: 12, md: 3 }}>
            <CustomTextField
              select
              fullWidth
              label={t('filters.sortDirection')}
              value={sortAs}
              onChange={event => updateParams({ sort_as: event.target.value, page: 1 })}
            >
              <MenuItem value='asc'>{t('filters.sortAsc')}</MenuItem>
              <MenuItem value='desc'>{t('filters.sortDesc')}</MenuItem>
            </CustomTextField>
          </Grid>
        </>
      }
      clearFiltersLabel={t('filters.reset')}
      onClearFilters={resetFilters}
      activeFiltersCount={activeFiltersCount}
    />
  )
}

export default PaymentLinksFiltersSection
