import React from 'react';

import renderWithTheme from '../../../../testUtils/renderWithTheme';

import * as formField from '..';
import Input from '../../../Input';

const FormField = formField.default;
const { getValidateSuffixElement, getValidatedChildren } = formField;

describe('getValidateSuffixElement', () => {
  it('returns correct input suffix icon along with validate icon', () => {
    const input = <Input suffix="clock" />;
    const { getByTestId, container } = renderWithTheme(
      <>{getValidateSuffixElement(input, 'success')}</>
    );

    expect(getByTestId('validate-suffix-wrapper')).toBeInTheDocument();
    expect(container).toContainElement(getByTestId('input-suffix-icon'));
    expect(container).toContainElement(getByTestId('validate-icon'));
  });

  it('returns original suffix along with validate icon', () => {
    const suffix = <span>suffix</span>;
    const input = <Input suffix={suffix} />;
    const { getByTestId, getByText, container } = renderWithTheme(
      <>{getValidateSuffixElement(input, 'success')}</>
    );

    expect(getByTestId('validate-suffix-wrapper')).toBeInTheDocument();
    expect(container).toContainElement(getByText('suffix'));
    expect(container).toContainElement(getByTestId('validate-icon'));
  });
});

describe('getValidatedChildren', () => {
  it('returns children itself', () => {
    const children = <Input />;

    expect(getValidatedChildren(children)).toBe(children);
  });

  it('returns input with a validate suffix', () => {
    const children = <Input />;
    const suffix = <span>validate icon</span>;

    jest
      .spyOn(formField, 'getValidateSuffixElement')
      .mockImplementation(() => suffix);

    expect(getValidatedChildren(children, 'success')).toStrictEqual(
      <Input suffix={suffix} />
    );
  });

  it('returns text area with a wrapper and validate suffix', () => {
    const children = <Input.TextArea data-test-id="text-area" />;

    const { getByTestId, container } = renderWithTheme(
      <>{getValidatedChildren(children, 'warning')}</>
    );

    expect(getByTestId('text-area-field-wrapper')).toBeInTheDocument();
    expect(container).toContainElement(getByTestId('text-area'));
    expect(container).toContainElement(getByTestId('validate-icon'));
  });
});

describe('FormField', () => {
  it('returns FieldWrapper and validated children', () => {
    jest
      .spyOn(formField, 'getValidatedChildren')
      .mockImplementation(() => <span>mocked field</span>);

    const { getByTestId, getByText, container } = renderWithTheme(
      <FormField data-test-id="form-field">
        <Input />
      </FormField>
    );

    expect(getByTestId('form-field')).toBeInTheDocument();
    expect(container).toContainElement(getByText('mocked field'));
  });
});