import { describe, expect, it } from 'vitest'
import type { Props } from '../html-types.ts'
import type { Handle } from '@remix-run/component'

describe('Props type', () => {
  it('works with simple components w/o props', () => {
    function Test() {
      return null
    }
    let el = <Test />
    // @ts-expect-error - unknown prop
    let el2 = <Test foo="bar" />
    expect(true).toBe(true)
  })

  it('works with simple components with props', () => {
    function Test({ foo }: { foo: string }) {
      return null
    }
    let el = <Test foo="bar" />
    // @ts-expect-error - missing prop
    let el2 = <Test />
    expect(true).toBe(true)
  })

  it('works with Handle components', () => {
    function Test(this: Handle) {
      return null
    }
    let el = <Test />
    // @ts-expect-error - unknown prop
    let el2 = <Test foo="bar" />
    expect(true).toBe(true)
  })

  it('works with Handle components with props', () => {
    function Test(this: Handle) {
      return ({ foo }: { foo: string }) => null
    }
    let el = <Test foo="bar" />
    // @ts-expect-error - missing prop
    let el2 = <Test />
    expect(true).toBe(true)
  })

  it('works with stateful components', () => {
    function Test(this: Handle) {
      return () => null
    }
    let el = <Test />
    // @ts-expect-error - unknown prop
    let el2 = <Test foo="bar" />
    expect(true).toBe(true)
  })

  it('works with setup/render props', () => {
    function Test(this: Handle, { initial }: { initial: string }) {
      return ({ foo }: { foo: string }) => null
    }
    let el = <Test initial="bar" foo="bar" />
    // @ts-expect-error - missing prop
    let el2 = <Test />
    // @ts-expect-error - foo
    let el3 = <Test initial="bar" />
    expect(true).toBe(true)
  })

  it('works with required setup prop and optional render prop', () => {
    function Test(this: Handle, { initial }: { initial: string }) {
      return ({ foo }: { foo?: string }) => null
    }
    let el = <Test initial="bar" foo="bar" />
    let el2 = <Test initial="bar" foo="bar" />
    let el3 = <Test initial="bar" />
    // @ts-expect-error - missing initial
    let el4 = <Test foo="bar" />
    expect(true).toBe(true)
  })

  it('works with required render prop and optional setup prop', () => {
    function Test(this: Handle, { initial }: { initial?: string }) {
      return ({ foo }: { foo: string }) => null
    }
    let el = <Test initial="bar" foo="bar" />
    let el2 = <Test initial="bar" foo="bar" />
    let el3 = <Test foo="bar" />
    // @ts-expect-error - missing foo
    let el4 = <Test initial="bar" />
    expect(true).toBe(true)
  })

  it('allows aria props', () => {
    let el = <div aria-label="test" />
    expect(true).toBe(true)
  })

  it('maintains original types', () => {
    function TestComp1({ foo }: { foo: string }) {
      return <div aria-label="lol">{foo}</div>
    }
    // @ts-expect-error - missing `foo`
    let el1 = <TestComp1 />

    interface TestProps extends Props<'div'> {
      foo: string
    }
    function TestComp2({ foo }: TestProps) {
      return <div>{foo}</div>
    }
    // @ts-expect-error - missing `foo`
    let el2 = <TestComp2 />
    let el3 = <TestComp2 foo="lol" />

    // get test to pass, we only care about `typecheck`
    expect(true).toBe(true)
  })
})