import React from "react";
import { TYPES, Input, Click, Location } from 'App/types/session/event'
import { CodeBlock, CopyButton } from "UI";
import { Segmented } from 'antd';

interface Props {
  events: Input[] | Click[] | Location[];
  width: number;
  height: number;
}

function UnitStepsModal({ events, width, height }: Props) {
  const [eventStr, setEventStr] = React.useState('')
  const [activeFramework, setActiveFramework] = React.useState('puppeteer')

  React.useEffect(() => {
    const userEventTypes = [TYPES.LOCATION, TYPES.CLICK, TYPES.INPUT]
    const puppeteerEvents = {
      [TYPES.LOCATION]: (event: Location) => `await page.goto('${event.url}')`,
      [TYPES.CLICK]: (event: Click) => `await page.locator('${event.selector.length ? event.selector : event.label}').click()`,
      [TYPES.INPUT]: (event: Input) => `await page.locator('${event.label}').type('Test Input')`,
      'screen': () => `await page.setViewport({width: ${width}, height: ${height})`
    }
    const cypressEvents = {
      [TYPES.LOCATION]: (event: Location) => `cy.visit('${event.url}')`,
      [TYPES.CLICK]: (event: Click) => `cy.get('${event.selector.length ? event.selector : event.label}').click()`,
      [TYPES.INPUT]: (event: Input) => `cy.get('${event.label}').type('Test Input')`,
      'screen': () => `cy.viewport(${width}, ${height})`
    }
    const usedCollection = activeFramework === 'puppeteer' ? puppeteerEvents : cypressEvents

    let finalScript = ''
    events.forEach((ev) => {
      if (userEventTypes.includes(ev.type)) {
        finalScript += usedCollection[ev.type](ev)
        finalScript += '\n'
      }
    })
    setEventStr(finalScript)
  }, [events, activeFramework])

  return (
    <div className={'bg-white h-full flex flex-col items-start gap-2'}>
      <div className={'flex items-center gap-4'}>
        <Segmented
          options={[
            { label: 'Puppeteer', value: 'puppeteer' },
            { label: 'Cypress', value: 'cypress' }
          ]}
          value={activeFramework}
          onChange={(value) => setActiveFramework(value)}
        />
        <CopyButton size={'middle'} variant={'default'} content={eventStr} className={'capitalize font-medium text-neutral-400'} />
      </div>
      <div className={'w-full'}>
        <CodeBlock code={eventStr} language={'javascript'} />
      </div>
    </div>
  );
}

export default UnitStepsModal;