import React, { forwardRef } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import Grid from '@mui/material/Grid'
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button'
import CardHeader from '@mui/material/CardHeader'
import InputAdornment from '@mui/material/InputAdornment'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Date Picker
import DatePicker from 'react-datepicker'
import format from 'date-fns/format'

import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'

interface CustomInputProps {
  value?: string
  label?: string
  onClick?: () => void
}

const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(({ value, label, onClick }, ref) => {
  return (
    <TextField
      fullWidth
      inputRef={ref}
      label={label}
      value={value}
      size='small'
      onClick={onClick}
      InputProps={{
        readOnly: true
      }}
    />
  )
})

CustomInput.displayName = 'CustomInput'

interface TransactionFiltersProps {
  fromDate: Date | null
  toDate: Date | null
  searchValue: string
  onFromDateChange: (date: Date | null) => void
  onToDateChange: (date: Date | null) => void
  onSearchChange: (value: string) => void
  onReset: () => void
}

const TransactionFilters = ({
  fromDate,
  toDate,
  searchValue,
  onFromDateChange,
  onToDateChange,
  onSearchChange,
  onReset
}: TransactionFiltersProps) => {
  return (
    <Card>
      <CardHeader title='Filters' />
      <DatePickerWrapper>
        <Box sx={{ p: 5, pt: 0 }}>
          <Grid container spacing={4}>
            <Grid item xs={12} sm={3}>
              <DatePicker
                selected={fromDate}
                onChange={date => onFromDateChange(date)}
                maxDate={toDate || new Date()}
                popperPlacement='bottom-start'
                customInput={<CustomInput label='From Date' value={fromDate ? format(fromDate, 'MM/dd/yyyy') : ''} />}
              />
            </Grid>

            <Grid item xs={12} sm={3}>
              <DatePicker
                selected={toDate}
                onChange={date => onToDateChange(date)}
                minDate={fromDate || undefined}
                maxDate={new Date()}
                popperPlacement='bottom-start'
                customInput={<CustomInput label='To Date' value={toDate ? format(toDate, 'MM/dd/yyyy') : ''} />}
              />
            </Grid>

            <Grid item xs={12} sm={4}>
              <TextField
                fullWidth
                size='small'
                placeholder='Search by Transaction ID, Description, Type or Status'
                value={searchValue}
                onChange={e => onSearchChange(e.target.value)}
                InputProps={{
                  startAdornment: (
                    <InputAdornment position='start'>
                      <Icon icon='tabler:search' fontSize={20} />
                    </InputAdornment>
                  )
                }}
              />
            </Grid>

            <Grid item xs={12} sm={2}>
              <Button
                fullWidth
                variant='outlined'
                color='secondary'
                onClick={onReset}
                startIcon={<Icon icon='tabler:refresh' />}
                sx={{ height: '40px' }}
              >
                Reset
              </Button>
            </Grid>
          </Grid>
        </Box>
      </DatePickerWrapper>
    </Card>
  )
}

export default TransactionFilters