/**
 * @jest-environment jsdom
 */
import { fireEvent } from '@testing-library/dom'
import { camelCase } from 'es-toolkit'
import { collectFormSubmissions, getNearestLabel, InputElement } from '../forms'

const ogSetTimeout = global.setTimeout
const sleep = (ms: number) => new Promise((resolve) => ogSetTimeout(resolve, ms))

describe('forms', () => {
  let form: HTMLFormElement
  let submitButton: HTMLButtonElement
  let originalFormHandler: jest.Mock
  let originalSubmit: jest.Mock

  beforeAll(() => {
    // Stub the missing HTMLFormElement.prototype.submit method.
    HTMLFormElement.prototype.submit = originalSubmit = jest.fn()
  })

  beforeEach(() => {
    // Create a form and add it to the DOM.
    form = document.createElement('form')
    form.innerHTML = `
      <input type="text" name="other-password" value="sekret" />
      <input type="password" name="other-password" value="sekret" />
      <input type="text" name="password" value="sekret" />
      <input type="text" name="name" value="kate" />
      <input type="text" name="company" value="bigco" />
      <input type="text" name="random-field-we-dont-want" value="who-cares" />
      <button type="submit">Submit</button>
    `
    document.body.appendChild(form)

    // Stash a reference to the submit button.
    submitButton = form.querySelector('button')!

    // Create a mock handler that prevents submission (necessary to prevent jsdom from barfing).
    originalFormHandler = jest.fn().mockImplementation((event) => {
      event.preventDefault()
    })

    form.addEventListener('submit', originalFormHandler)
  })

  test('leaves existing form submission in tact', async () => {
    const callback = jest.fn().mockResolvedValue(undefined)
    collectFormSubmissions(callback)

    fireEvent(
      submitButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    await sleep(200)
    expect(originalFormHandler).toHaveBeenCalled()
    expect(callback).toHaveBeenCalled()
  })

  test('leaves form.submit calls in tact', async () => {
    const callback = jest.fn().mockResolvedValue(undefined)
    collectFormSubmissions(callback)

    await form.submit.call(form)

    expect(originalSubmit).toHaveBeenCalled()
    expect(callback).toHaveBeenCalled()
  })

  test('ignores sensitive fields like passwords', () => {
    const callback = jest.fn()
    collectFormSubmissions(callback)

    fireEvent(
      submitButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    expect(callback).not.toHaveBeenCalledWith(
      expect.objectContaining({
        formData: {
          password: 'sekret'
        }
      })
    )
  })

  test('ignores forms with data-koala-collect=off', () => {
    const callback = jest.fn()
    collectFormSubmissions(callback)

    form.setAttribute('data-koala-collect', 'off')

    fireEvent(
      submitButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    expect(callback).not.toHaveBeenCalled()
  })

  test('ignores forms on ignored paths', () => {
    Object.defineProperty(window, 'location', {
      value: {
        pathname: '/contact'
      }
    })

    const callback = jest.fn()
    collectFormSubmissions(callback, {
      ignoredForms: [
        {
          identifier_type: 'path',
          identifier: '/contact'
        }
      ]
    })

    fireEvent(
      submitButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    expect(callback).not.toHaveBeenCalled()
  })

  test('captures other fields we care about', () => {
    const callback = jest.fn()
    collectFormSubmissions(callback)

    fireEvent(
      submitButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    expect(callback).toHaveBeenCalledWith(
      expect.objectContaining({
        formData: {
          name: 'kate',
          company: 'bigco',
          'random-field-we-dont-want': 'who-cares'
        }
      })
    )
  })

  test('doesnt blow up form submissions if the callback throws', async () => {
    const callback = jest.fn().mockRejectedValueOnce(new Error('newp'))

    collectFormSubmissions(callback)

    fireEvent(
      submitButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    await sleep(100)

    expect(originalFormHandler).toHaveBeenCalled()
  })

  describe('traits', () => {
    test('collects all form data separate from traits', () => {
      const callback = jest.fn()
      collectFormSubmissions(callback)

      form.querySelector('[name="company"]')?.setAttribute('name', 'random-field')

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            name: 'kate',
            'random-field': 'bigco',
            'random-field-we-dont-want': 'who-cares'
          },
          traits: {}
        })
      )
    })
  })

  describe('form configurations', () => {
    test('extracts traits if an email or first/last name is provided', () => {
      form.innerHTML = `
        <input type="text" name="Name" value="Netto Farah" />
        <input type="text" name="name" value="netto farah" />
        <input type="text" name="NAME" value="NETTO FARAH" />
        <input type="text" name="FIRST_NAME" value="NETTO" />
        <input type="text" name="Last_Name" value="Farah" />
        <input type="text" name="lastName" value="Farah" />
        <input type="text" name="First_Name" value="Netto" />
        <input type="text" name="first_name" value="Netto" />
        <input type="text" name="job_title" value="President of Shipping" />

        <input type="text" name="favorite_color" value="black" />
        <button type="submit">Submit</button>
        `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            FIRST_NAME: 'NETTO',
            First_Name: 'Netto',
            Last_Name: 'Farah',
            NAME: 'NETTO FARAH',
            Name: 'Netto Farah',
            favorite_color: 'black',
            first_name: 'Netto',
            lastName: 'Farah',
            name: 'netto farah',
            job_title: 'President of Shipping'
          },
          traits: {
            firstName: 'NETTO',
            lastName: 'Farah',
            name: 'Netto Farah',
            title: 'President of Shipping'
          }
        })
      )
    })

    test('ignores name related fields if no email and no first/last name is provided', () => {
      form.innerHTML = `
        <input type="text" name="Name" value="Netto Farah" />
        <input type="text" name="name" value="netto farah" />
        <input type="text" name="NAME" value="NETTO FARAH" />
        <input type="text" name="Last_Name" value="Farah" />
        <input type="text" name="lastName" value="Farah" />

        <input type="text" name="favorite_color" value="black" />
        <button type="submit">Submit</button>
        `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            Last_Name: 'Farah',
            NAME: 'NETTO FARAH',
            Name: 'Netto Farah',
            favorite_color: 'black',
            lastName: 'Farah',
            name: 'netto farah'
          },
          traits: {}
        })
      )
    })

    test('uses associated label for unnamed fields', () => {
      form.innerHTML = `
        <div>
          <label for="work_email">Work Email</label>
          <input type="text" id="work_email" value="work_email@example.com" />
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            workEmail: 'work_email@example.com'
          },
          traits: {
            email: 'work_email@example.com'
          }
        })
      )
    })

    test('ignores hidden input', () => {
      form.innerHTML = `
        <div>
          <label for="work_email">Work Email</label>
          <input type="text" id="work_email" value="work_email@example.com" />
        </div>
        <div>
          <input type="hidden" id="person_key" value="p_123" />
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            workEmail: 'work_email@example.com'
          },
          traits: {
            email: 'work_email@example.com'
          }
        })
      )
    })

    test('ignores submit inputs', () => {
      form.innerHTML = `
        <input type="submit" value="Submit" />
      `

      submitButton = form.querySelector('input[type="submit"]')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {},
          traits: {}
        })
      )
    })

    test('uses wrapping label for unnamed fields', () => {
      form.innerHTML = `
        <div>
          <label>
            <div>Work Email</div>
            <div>
              <input type="text" value="work_email@example.com" />
            </div>
          </label>
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            workEmail: 'work_email@example.com'
          },
          traits: {
            email: 'work_email@example.com'
          }
        })
      )
    })

    test('extracts email based on approximate name or label', () => {
      form.innerHTML = `
        <div>
          <label>
            Your Work Email
          </label>
          <div>
            <div>
              <input id="input_7" name="Registrant[email]" type="email" value="matt@getkoala.com" />
            </div>
          </div>
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            'Registrant[email]': 'matt@getkoala.com'
          },
          traits: {
            email: 'matt@getkoala.com'
          }
        })
      )
    })

    test('extracts email based on most semantic name, label or id', () => {
      form.innerHTML = `
        <div>
          <label>
            Your Email
          </label>
          <div>
            <div>
              <input id="input_7" name="input_89_7" type="email" value="matt@getkoala.com" />
            </div>
          </div>
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            input_89_7: 'matt@getkoala.com'
          },
          traits: {
            email: 'matt@getkoala.com'
          }
        })
      )
    })

    test('uses nearest "sibling" label for unnamed fields', () => {
      form.innerHTML = `
        <div>
          <label>
            Random Field
          </label>
          <div>
            <div>
              <input type="text" value="Random Value" />
            </div>
          </div>
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            randomField: 'Random Value'
          },
          traits: {}
        })
      )
    })

    test('do not search for labels when the field is a direct descendent of the form', () => {
      form.innerHTML = `
        <input name="inbox_key" value="main" id="inbox_key">
        <div>
          <label for="fname">
            First name
          </label>
          <input id="fname" name="fname" type="text">
        </div>
        <button type="submit">Submit</button>
      `

      const label = getNearestLabel(
        form.querySelector('#inbox_key') as InputElement,
        Array.from(form.querySelectorAll('input')) as InputElement[]
      )
      expect(label).toBeFalsy()

      const validLabel = getNearestLabel(
        form.querySelector('#fname') as InputElement,
        Array.from(form.querySelectorAll('input')) as InputElement[]
      )
      expect(validLabel).toEqual(camelCase('First name'))
    })

    test('treats "work email" as email trait', () => {
      form.innerHTML = `
        <div>
          <label>
            Work Email
            <input type="text" value="work_email@example.com" />
          </label>
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            workEmail: 'work_email@example.com'
          },
          traits: {
            email: 'work_email@example.com'
          }
        })
      )
    })

    test('parses reserved traits into consistent trait names', () => {
      form.innerHTML = `
        <div>
          <label>
            Your Email
            <input type="text" value="person@example.com" />
          </label>
          <div>
            <label>Domain</label>
            <input type="text" value="example.com" />
          </div>
          <label for="input_123">Title</label>
          <input type="text" id="input_123" name="registrant[title]" value="CEO" />
        </div>
        <button type="submit">Submit</button>
      `

      submitButton = form.querySelector('button')!

      const callback = jest.fn()
      collectFormSubmissions(callback)

      fireEvent(
        submitButton,
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true
        })
      )

      expect(callback).toHaveBeenCalledWith(
        expect.objectContaining({
          formData: {
            yourEmail: 'person@example.com',
            domain: 'example.com',
            'registrant[title]': 'CEO'
          },
          traits: {
            email: 'person@example.com',
            title: 'CEO',
            domain: 'example.com'
          }
        })
      )
    })
  })

  test('parses complex form structures with poor naming', () => {
    form.innerHTML = `
      <div>
        <div>
          <label>First Name<span><span>*</span></span></label>
          <div>
            <input
              name="input_3"
              id="input_19_3"
              type="text"
              value="Matt"
            />
          </div>
        </div>
        <div>
          <label>Last Name<span><span>*</span></span></label>
          <div>
            <input
              name="input_5"
              id="input_19_5"
              type="text"
              value="Shwery"
            />
          </div>
        </div>
        <div>
          <label>Email<span><span>*</span></span></label>
          <div>
            <input
              name="input_7"
              id="input_19_7"
              type="email"
              value="matt@getkoala.com"
            />
          </div>
        </div>
        <div>
          <label>Company<span><span>*</span></span></label>
          <div>
            <input name="input_8" id="input_19_8" type="text" value="Acme Corp" />
          </div>
        </div>
        <div>
          <label>Job Title<span><span>*</span></span></label>
          <div>
            <input name="input_16" id="input_19_16" type="text" value="CEO" />
          </div>
        </div>
        <div>
          <label>utm_content</label>
          <div>
            <input
              name="input_3"
              id="input_14_3"
              type="text"
              value="1"
            />
          </div>
        </div>
      </div>
      <button type="submit">Submit</button>
    `

    submitButton = form.querySelector('button')!

    const callback = jest.fn()
    collectFormSubmissions(callback)

    fireEvent(
      submitButton,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true
      })
    )

    expect(callback).toHaveBeenCalledWith(
      expect.objectContaining({
        formData: {
          input_16: 'CEO',
          input_3: 'Matt',
          input_5: 'Shwery',
          input_7: 'matt@getkoala.com',
          input_8: 'Acme Corp',
          utmContent: '1'
        },
        traits: {
          company: 'Acme Corp',
          email: 'matt@getkoala.com',
          title: 'CEO',
          firstName: 'Matt',
          lastName: 'Shwery'
        }
      })
    )
  })
})