// import { expect, test } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import { composeStories } from '@storybook/react';
import '@testing-library/jest-dom';

import * as DemoStories from './demo.stories';

const { BasePegaDxilMyTwoColumnForm } = composeStories(DemoStories);

test('renders PegaDxilMyTwoColumnForm', async () => {
  render(<BasePegaDxilMyTwoColumnForm />);
  expect(await screen.findByText('Form Region template')).toBeVisible();

  // labels
  expect(await screen.findByText('First Name')).toBeVisible();
  expect(await screen.findByText('Middle Name')).toBeVisible();
  expect(await screen.findByText('Last Name')).toBeVisible();
  expect(await screen.findByText('Email')).toBeVisible();
  expect(await screen.findByText('Phone Number')).toBeVisible();
  expect(await screen.findByText('Service Date')).toBeVisible();

  const inputElements = screen.getAllByTestId(':input:control');
  expect((inputElements[0] as HTMLInputElement).value).toBe('John');
  expect((inputElements[1] as HTMLInputElement).value).toBe('');
  expect((inputElements[2] as HTMLInputElement).value).toBe('Doe');
  expect((inputElements[3] as HTMLInputElement).value).toBe('John@doe.com');

  const myPhone = (screen.getByTestId(':phone-input:control') as HTMLInputElement).value;
  expect(myPhone).toContain('(639) 797-5093');

  const myClearMonth = (screen.getByTestId(':date-input:control-month') as HTMLInputElement).value;
  expect(myClearMonth).toContain('01');

  const myClearDay = (screen.getByTestId(':date-input:control-day') as HTMLInputElement).value;
  expect(myClearDay).toContain('25');

  const myClearYear = (screen.getByTestId(':date-input:control-year') as HTMLInputElement).value;
  expect(myClearYear).toContain('2023');

  // verify 2 columns
  const fieldSet = screen.getByRole('group');

  // <fieldset>
  // <legend></legend>
  // <div>
  //  <div>
  //    <div> 2 divs (columns) </div>
  //  </div>
  // </div>
  // </fieldset>

  // eslint-disable-next-line testing-library/no-node-access
  expect(fieldSet.children[1].children[0].children[0].children).toHaveLength(2);


});