import React from "react"
import { render, screen } from '@testing-library/react'
import Note from "../index" 

// Renders elements from props
test('Render title and message', () => {
  const { getByText } = render(
    <Note
      data-testid="note"
      type="success"
      title="Title"
      message="Description"
      action={{
        label: "Action",
        onClick: () => console.log("Click!")
      }}
    />
  )
  expect(getByText("Title")).toBeInTheDocument()
  expect(getByText("Description")).toBeInTheDocument()
  expect(getByText("Action")).toBeInTheDocument()
})

// Render css and icon for different note types
test('Render green success', () => {
  const { container } = render(<Note data-testid="note" type="success" title="Template success" />)
  expect(screen.getByTestId("note")).toHaveClass("bg-green-50")
  expect(container.querySelector(`svg[name="check-circle"]`)).toBeInTheDocument()
})

test('Render yellow warning', () => {
  const { container } = render(<Note data-testid="note" type="warning" title="Template warning" />)
  expect(screen.getByTestId("note")).toHaveClass("bg-yellow-50")
  expect(container.querySelector(`svg[name="alert-circle"]`)).toBeInTheDocument()
})
  
test('Render blue info', () => {
  const { container } = render(<Note data-testid="note" type="info" title="Template info" />)
  expect(screen.getByTestId("note")).toHaveClass("bg-blue-50")
  expect(container.querySelector(`svg[name="information-circle"]`)).toBeInTheDocument()
})

test('Render red error', () => {
  const { container } = render(<Note data-testid="note" type="error" title="Template error" />)
  expect(screen.getByTestId("note")).toHaveClass("bg-red-50")
  expect(container.querySelector(`svg[name="alert-triangle"]`)).toBeInTheDocument()
})

// Small notes
test('Small notes do not render titles', () => {
  const { queryByText } = render(
    <Note
      size="sm"
      type="success"
      title="Title"
      message="Description"
    />
  )
  expect(queryByText("Title")).not.toBeInTheDocument()
  expect(queryByText("Description")).toBeInTheDocument()
})

// Note supports className
test('classname is added to the note', () => {
  render(<Note type="error" className="mr-2 ml-5">Pro</Note>)
  expect(screen.getByTestId("note")).toHaveClass("bg-red-50 mr-2 ml-5")
})

// Note works with custom children
test('children are rendered', () => {
  const { getByText } = render(
    <Note type="info">Custom text!</Note>
  )
  expect(getByText("Custom text!")).toBeInTheDocument()
})
