'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { Stack } from '@mui/material';
import { Button, SelectField, TextField } from '@penzack/ui-components';
import { format } from 'date-fns';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import InputMask from 'react-input-mask';
import { z } from 'zod';

import {
  optionsLabelBlock,
  optionsLabelStatus,
  optionsLabelWithdrawStatus,
  optionsTypeUser,
  validStatusList,
  validTypeList,
} from '@/consts/tableFilter';
import { theme } from '@/theme';
import { usePathname, useRouter } from '@/utils/intl-navigation';

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

const tableFilterSchema = z.object({
  date: z.object({
    startDate: z.date().nullable(),
    endDate: z.date().nullable(),
  }),
  type: z.string().optional(),
  cpf: z.string().optional(),
  email: z.string().optional(),
  status: z.string().optional(),
  cognitoId: z.string().optional(),
  block: z.string().optional(),
});

type TableFilterSchemaType = z.infer<typeof tableFilterSchema>;

type TableFilterProps = {
  showStatusField?: boolean;
  showUserType?: boolean;
  showWithdrawalOptions?: boolean;
  showBlockOptions?: boolean;
  tableId: string;
};

export const TableFilter = ({
  showStatusField,
  showUserType = true,
  showWithdrawalOptions = false,
  showBlockOptions = false,
  tableId,
}: TableFilterProps) => {
  const [selectedType, setSelectedType] = useState('all');
  const [selectedStatus, setSelectedStatus] = useState('all');
  const [selectedBlock, setSelectedBlock] = useState('all');

  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const { register, handleSubmit, control } = useForm<TableFilterSchemaType>({
    resolver: zodResolver(tableFilterSchema),
    values: {
      cpf: searchParams.get('cpf') ?? '',
      date: {
        startDate: searchParams.get('startDate') ? new Date(searchParams.get('startDate')!) : null,
        endDate: searchParams.get('endDate') ? new Date(searchParams.get('endDate')!) : null,
      },
      email: searchParams.get('email') ?? '',
      status: searchParams.get('status') ?? '',
      type: searchParams.get('type') ?? '',
      cognitoId: searchParams.get('cognitoId') ?? '',
      block: searchParams.get('block') ?? '',
    },
  });

  const handleFilterSubmit = ({
    cpf,
    date,
    email,
    status,
    type,
    cognitoId,
    block,
  }: TableFilterSchemaType) => {
    const params = new URL(document.location.toString()).searchParams;

    cpf ? params.set('cpf', cpf) : params.delete('cpf');

    date.startDate
      ? params.set('startDate', format(date.startDate, 'yyyy-MM-dd HH:mm:ss'))
      : params.delete('startDate');
    date.endDate
      ? params.set('endDate', format(date.endDate, 'yyyy-MM-dd HH:mm:ss'))
      : params.delete('endDate');
    email ? params.set('email', email) : params.delete('email');

    const checkStatus = status && validStatusList.includes(status);
    !!checkStatus ? params.set('status', status) : params.delete('status');

    const checkType = type && validTypeList.includes(type);
    !!checkType ? params.set('type', type) : params.delete('type');

    cognitoId ? params.set('cognitoId', cognitoId) : params.delete('cognitoId');

    const checkBlock = block && selectedBlock.includes(block);
    !!checkBlock ? params.set('block', block) : params.delete('block');

    params.set(`${tableId}Page`, '0');
    params.set(`${tableId}PageSize`, params.get(`${tableId}PageSize`) || '10');

    router.push(`${pathname}?${params.toString()}`);
  };

  const handleSelectType = (value: string) => {
    setSelectedType(value);
    register('type').onChange({ target: { value } });
  };

  const handleSelectStatus = (value: string) => {
    setSelectedStatus(value);
    register('status').onChange({ target: { value } });
  };

  const handleSelectBlock = (value: string) => {
    setSelectedBlock(value);
    register('block').onChange({ target: { value } });
  };

  return (
    <form
      onSubmit={handleSubmit(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={control}
          name="date"
          render={({ field }) => <DateRangePicker value={field.value} setValue={field.onChange} />}
        />
        <TextField
          {...register('cognitoId')}
          label=""
          placeholder="Cognito ID"
          name="cognitoId"
          sx={{ width: '100px' }}
        />
        {showUserType && (
          <SelectField
            {...register('type')}
            onChange={(value) => handleSelectType(value)}
            placeholder="Type of user"
            label="Type of user"
            value={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' }}
          {...register('cpf')}
        >
          {(inputProps) => <TextField {...inputProps} />}
        </InputMask>
        <TextField
          {...register('email')}
          label=""
          placeholder="Email"
          name="email"
          sx={{ width: '200px' }}
        />
        {showStatusField && (
          <SelectField
            {...register('status')}
            onChange={(value) => handleSelectStatus(value)}
            placeholder="Status"
            label="Status"
            value={selectedStatus}
            options={showWithdrawalOptions ? optionsLabelWithdrawStatus : optionsLabelStatus}
            sx={{ width: '140px' }}
          />
        )}
        {showBlockOptions && (
          <SelectField
            {...register('block')}
            onChange={(value) => handleSelectBlock(value)}
            placeholder="Type of block"
            label="Type of block"
            value={selectedBlock}
            options={optionsLabelBlock}
            sx={{ width: '170px' }}
          />
        )}
      </Stack>
      <Button type="submit" variant="outlined" sx={{ minWidth: 105 }}>
        Search
      </Button>
    </form>
  );
};