import { render, screen, waitFor } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { UserActionState } from 'enums'
import { DateTime } from 'luxon'
import { UserAction } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import {
  defaultEcogestureData,
  ecogestureDefault,
} from 'tests/__mocks__/actionData.mock'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
import ActionOnGoing from './ActionOnGoing'

describe('ActionOnGoing component', () => {
  const store = createMockEcolyoStore()
  const userAction: UserAction = {
    ecogesture: ecogestureDefault,
    startDate: DateTime.local(2020, 1, 1)
      .setZone('utc', {
        keepLocalTime: true,
      })
      .startOf('day'),
    state: UserActionState.ONGOING,
  }
  it('should render correctly', async () => {
    const { container } = render(
      <Provider store={store}>
        <ActionOnGoing userAction={userAction} />
      </Provider>
    )
    await waitFor(() => null, { container })
    expect(container).toMatchSnapshot()
  })
  it('should click on button open ecogesture Modal', async () => {
    const userAction1: UserAction = {
      ecogesture: defaultEcogestureData[1],
      startDate: null,
      state: UserActionState.ONGOING,
    }

    render(
      <Provider store={store}>
        <ActionOnGoing userAction={userAction1} />
      </Provider>
    )
    await userEvent.click(screen.getByText('action.details'))
    expect(screen.getByRole('dialog')).toBeTruthy()
  })
})