import { getBankCardList, getCashList } from '@mocks/browser/handlers';
import { selectOption, typeDateField, typeTextField } from '@mocks/jest/helpers';
import { server } from '@mocks/jest/server';
import { createAppWrapper } from '@mocks/jest/wrappers';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import type { BankCard } from '@/entity/cards';
import type { CashItem } from '@/entity/cash';
import type { AddExpenseItemFormProps } from '@/entity/expenses/item';

import { AddExpenseItemForm } from '@/entity/expenses/item';
import { DataTestId } from '@/shared/constants';

const renderForm = (props?: Partial<AddExpenseItemFormProps>) => {
  server.use(getBankCardList, getCashList);
  const onSubmit = jest.fn();

  render(
    <AddExpenseItemForm onSubmit={onSubmit} {...props} />,
    { wrapper: createAppWrapper() },
  );

  return {
    onSubmit,
  };
};

const getFormElements = () => {
  const formElem = screen.getByTestId(DataTestId.ADD_EXPENSE_ITEM_FORM);
  const titleInputElem = screen.getByLabelText(/Название/);
  const descriptionInputElem = screen.getByLabelText(/Описание/);
  const dateInputElem = screen.getAllByLabelText(/Дата/i)[1];
  const amountInputElem = screen.getByLabelText(/Сумма/);
  const countInputElem = screen.getByLabelText(/Количество/);
  const submitButtonElem = screen.getByTestId(DataTestId.ADD_EXPENSE_ITEM_SUBMIT_BUTTON);
  const paymentTypeSelect = screen.getByTestId('payment-type-select');

  const bankCardSelect = screen.queryByTestId('bank-card-select');
  const bankCardSelectInput = screen.queryByTestId('bank-card-select-input');

  const cashSelect = screen.queryByTestId('cash-select');
  const cashSelectInput = screen.queryByTestId('cash-select-input');

  return {
    amountInputElem,
    bankCardSelect,
    bankCardSelectInput,
    cashSelect,
    cashSelectInput,
    countInputElem,
    dateInputElem,
    descriptionInputElem,
    formElem,
    paymentTypeSelect,
    submitButtonElem,
    titleInputElem,
  };
};

type ExpenseFormValues = {
  amount?: string;
  count?: string;
  date?: string;
  description?: string;
  // eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
  paymentId?: BankCard['id'] | CashItem['id'];
  paymentType?: 'BANK_CARD' | 'CASH' | 'none';
  title?: string;
};

const submitForm = async () => {
  const { submitButtonElem } = getFormElements();
  await userEvent.click(submitButtonElem);
};

const fillForm = async (
  data: ExpenseFormValues,
  options: { autoSubmit?: boolean } = {},
) => {
  const {
    amount,
    count,
    date,
    description,
    paymentId,
    paymentType = 'none',
    title,
  } = data;
  const { autoSubmit = true } = options;
  const {
    amountInputElem,
    countInputElem,
    dateInputElem,
    descriptionInputElem,
    paymentTypeSelect,
    titleInputElem,
  } = getFormElements();

  await typeTextField(titleInputElem, title);
  await typeTextField(descriptionInputElem, description);
  await typeTextField(amountInputElem, amount);
  await typeTextField(countInputElem, count);
  await typeDateField(dateInputElem, date);

  if (paymentType !== 'none') {
    switch (paymentType) {
      case 'BANK_CARD':
        await selectOption(paymentTypeSelect, 'BANK_CARD');
        break;
      case 'CASH':
        await selectOption(paymentTypeSelect, 'CASH');
        break;
      default:
        break;
    }

    if (!paymentId) {
      return;
    }
    const { bankCardSelect, cashSelect } = getFormElements();
    switch (paymentType) {
      case 'BANK_CARD':
        await selectOption(bankCardSelect, paymentId);
        break;
      case 'CASH':
        await selectOption(cashSelect, paymentId);
        break;
      default:
        break;
    }
  }

  if (autoSubmit) {
    await submitForm();
  }
};

export const AddExpenseItemFormHelper = {
  fillForm,
  getFormElements,
  renderForm,
  submitForm,
};