'use client';

import { Stack } from '@mui/material';
import { Button, SelectField, TextField } from '@penzack/ui-components';
import { Controller } from 'react-hook-form';
import InputMask from 'react-input-mask';

import {
  optionsLabelBlock,
  optionsLabelStatus,
  optionsLabelWithdrawStatus,
  optionsTypeUser,
} from '@/consts/tableFilter';

import { theme } from '@/theme';

import { DateRangePicker } from '../DateRangePicker';

import { actions } from './TableFilter.controller'

import { TableFilterProps } from './TableFilter.types'

export const TableFilter = ({
  showStatusField,
  showUserType = true,
  showWithdrawalOptions = false,
  showBlockOptions = false,
  tableId,
}: TableFilterProps) => {
  const controller = actions(tableId)

  return (
    <form
      onSubmit={controller.handleSubmit(controller.handleFilterSubmit)}
      style={{
        display: 'flex',
        flexDirection: 'row',
        gap: theme.spacing(4),
        padding: `${theme.spacing(3)}px ${theme.spacing(4)}px`,
      }}
    >
      <Stack direction="row" alignItems="center" gap={2} flex={1} flexWrap="wrap">
        <Controller
          control={controller.control}
          name="date"
          render={({ field }) => <DateRangePicker value={field.value} setValue={field.onChange} />}
        />
        <TextField
          {...controller.register('cognitoId')}
          label=""
          placeholder="Cognito ID"
          name="cognitoId"
          sx={{ width: '100px' }}
        />
        {showUserType && (
          <SelectField
            {...controller.register('type')}
            onChange={(value) => controller.handleSelectType(value)}
            placeholder="Type of user"
            label="Type of user"
            value={controller.selectedType}
            options={optionsTypeUser}
            sx={{ width: '130px' }}
          />
        )}
        <InputMask
          mask={'999.999.999-99'}
          alwaysShowMask={false}
          maskPlaceholder=""
          type={'text'}
          placeholder="000.000.000-00"
          sx={{ width: '160px' }}
          {...controller.register('cpf')}
        >
          {(inputProps) => <TextField {...inputProps} />}
        </InputMask>
        <TextField
          {...controller.register('email')}
          label=""
          placeholder="Email"
          name="email"
          sx={{ width: '200px' }}
        />
        {showStatusField && (
          <SelectField
            {...controller.register('status')}
            onChange={(value) => controller.handleSelectStatus(value)}
            placeholder="Status"
            label="Status"
            value={controller.selectedStatus}
            options={showWithdrawalOptions ? optionsLabelWithdrawStatus : optionsLabelStatus}
            sx={{ width: '140px' }}
          />
        )}
        {showBlockOptions && (
          <SelectField
            {...controller.register('block')}
            onChange={(value) => controller.handleSelectBlock(value)}
            placeholder="Type of block"
            label="Type of block"
            value={controller.selectedBlock}
            options={optionsLabelBlock}
            sx={{ width: '170px' }}
          />
        )}
      </Stack>
      <Button type="submit" variant="outlined" sx={{ minWidth: 105 }}>
        Search
      </Button>
    </form>
  );
};