import _ from 'lodash'
import { Event, kinds, nip19, UnsignedEvent } from 'nostr-tools'
import React, {
  Fragment,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState
} from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { FixedSizeList as List } from 'react-window'
import { v4 as uuidv4 } from 'uuid'
import { T_TAG_VALUE } from '../constants'
import { useAppSelector, useGames, useNDKContext } from '../hooks'
import { appRoutes, getModPageRoute } from '../routes'
import '../styles/styles.css'
import { Categories, DownloadUrl, ModDetails, ModFormState } from '../types'
import {
  capitalizeEachWord,
  getCategories,
  initializeFormState,
  isReachable,
  isValidImageUrl,
  isValidUrl,
  log,
  LogType,
  now
} from '../utils'
import { CheckboxField, InputError, InputField } from './Inputs'
import { LoadingSpinner } from './LoadingSpinner'
import { NDKEvent } from '@nostr-dev-kit/ndk'
import { OriginalAuthor } from './OriginalAuthor'

interface FormErrors {
  game?: string
  title?: string
  body?: string
  featuredImageUrl?: string
  summary?: string
  nsfw?: string
  screenshotsUrls?: string[]
  tags?: string
  downloadUrls?: string[]
  author?: string
  originalAuthor?: string
}

interface GameOption {
  value: string
  label: string
}

type ModFormProps = {
  existingModData?: ModDetails
}

export const ModForm = ({ existingModData }: ModFormProps) => {
  const location = useLocation()
  const navigate = useNavigate()
  const { ndk, publish } = useNDKContext()
  const games = useGames()
  const userState = useAppSelector((state) => state.user)

  const [isPublishing, setIsPublishing] = useState(false)
  const [gameOptions, setGameOptions] = useState<GameOption[]>([])
  const [formState, setFormState] = useState<ModFormState>(
    initializeFormState()
  )
  const [formErrors, setFormErrors] = useState<FormErrors>({})

  useEffect(() => {
    if (location.pathname === appRoutes.submitMod) {
      setFormState(initializeFormState())
    }
  }, [location.pathname]) // Only trigger when the pathname changes to submit-mod

  useEffect(() => {
    if (existingModData) {
      setFormState(initializeFormState(existingModData))
    }
  }, [existingModData])

  useEffect(() => {
    const options = games.map((game) => ({
      label: game['Game Name'],
      value: game['Game Name']
    }))
    setGameOptions(options)
  }, [games])

  const handleInputChange = useCallback((name: string, value: string) => {
    setFormState((prevState) => ({
      ...prevState,
      [name]: value
    }))
  }, [])

  const handleCheckboxChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const { name, checked } = e.target
      setFormState((prevState) => ({
        ...prevState,
        [name]: checked
      }))
    },
    []
  )

  const addScreenshotUrl = useCallback(() => {
    setFormState((prevState) => ({
      ...prevState,
      screenshotsUrls: [...prevState.screenshotsUrls, '']
    }))
  }, [])

  const removeScreenshotUrl = useCallback((index: number) => {
    setFormState((prevState) => ({
      ...prevState,
      screenshotsUrls: prevState.screenshotsUrls.filter((_, i) => i !== index)
    }))
  }, [])

  const handleScreenshotUrlChange = useCallback(
    (index: number, value: string) => {
      setFormState((prevState) => ({
        ...prevState,
        screenshotsUrls: [
          ...prevState.screenshotsUrls.map((url, i) => {
            if (index === i) return value
            return url
          })
        ]
      }))
    },
    []
  )

  const addDownloadUrl = useCallback(() => {
    setFormState((prevState) => ({
      ...prevState,
      downloadUrls: [
        ...prevState.downloadUrls,
        {
          url: '',
          hash: '',
          signatureKey: '',
          malwareScanLink: '',
          modVersion: '',
          customNote: ''
        }
      ]
    }))
  }, [])

  const removeDownloadUrl = useCallback((index: number) => {
    setFormState((prevState) => ({
      ...prevState,
      downloadUrls: prevState.downloadUrls.filter((_, i) => i !== index)
    }))
  }, [])

  const handleDownloadUrlChange = useCallback(
    (index: number, field: keyof DownloadUrl, value: string) => {
      setFormState((prevState) => ({
        ...prevState,
        downloadUrls: [
          ...prevState.downloadUrls.map((url, i) => {
            if (index === i) url[field] = value
            return url
          })
        ]
      }))
    },
    []
  )

  const handlePublish = async () => {
    setIsPublishing(true)

    let hexPubkey: string

    if (userState.auth && userState.user?.pubkey) {
      hexPubkey = userState.user.pubkey as string
    } else {
      hexPubkey = (await window.nostr?.getPublicKey()) as string
    }

    if (!hexPubkey) {
      toast.error('Could not get pubkey')
      return
    }

    if (!(await validateState())) {
      setIsPublishing(false)
      return
    }

    const uuid = formState.dTag || uuidv4()
    const currentTimeStamp = now()

    const aTag =
      formState.aTag || `${kinds.ClassifiedListing}:${hexPubkey}:${uuid}`

    const tags = [
      ['d', uuid],
      ['a', aTag],
      ['r', formState.rTag],
      ['t', T_TAG_VALUE],
      [
        'published_at',
        existingModData
          ? existingModData.published_at.toString()
          : currentTimeStamp.toString()
      ],
      ['game', formState.game],
      ['title', formState.title],
      ['featuredImageUrl', formState.featuredImageUrl],
      ['summary', formState.summary],
      ['nsfw', formState.nsfw.toString()],
      ['repost', formState.repost.toString()],
      ['screenshotsUrls', ...formState.screenshotsUrls],
      ['tags', ...formState.tags.split(',')],
      [
        'downloadUrls',
        ...formState.downloadUrls.map((downloadUrl) =>
          JSON.stringify(downloadUrl)
        )
      ]
    ]
    if (formState.repost && formState.originalAuthor) {
      tags.push(['originalAuthor', formState.originalAuthor])
    }

    // Prepend com.degmods to avoid leaking categories to 3rd party client's search
    // Add heirarchical namespaces labels
    if (formState.LTags.length > 0) {
      for (let i = 0; i < formState.LTags.length; i++) {
        tags.push(['L', `com.degmods:${formState.LTags[i]}`])
      }
    }

    // Add category labels
    if (formState.lTags.length > 0) {
      for (let i = 0; i < formState.lTags.length; i++) {
        tags.push(['l', `com.degmods:${formState.lTags[i]}`])
      }
    }

    const unsignedEvent: UnsignedEvent = {
      kind: kinds.ClassifiedListing,
      created_at: currentTimeStamp,
      pubkey: hexPubkey,
      content: formState.body,
      tags
    }

    const signedEvent = await window.nostr
      ?.signEvent(unsignedEvent)
      .then((event) => event as Event)
      .catch((err) => {
        toast.error('Failed to sign the event!')
        log(true, LogType.Error, 'Failed to sign the event!', err)
        return null
      })

    if (!signedEvent) {
      setIsPublishing(false)
      return
    }

    const ndkEvent = new NDKEvent(ndk, signedEvent)
    const publishedOnRelays = await publish(ndkEvent)

    // Handle cases where publishing failed or succeeded
    if (publishedOnRelays.length === 0) {
      toast.error('Failed to publish event on any relay')
    } else {
      toast.success(
        `Event published successfully to the following relays\n\n${publishedOnRelays.join(
          '\n'
        )}`
      )

      const naddr = nip19.naddrEncode({
        identifier: aTag,
        pubkey: signedEvent.pubkey,
        kind: signedEvent.kind,
        relays: publishedOnRelays
      })

      navigate(getModPageRoute(naddr))
    }

    setIsPublishing(false)
  }

  const validateState = async (): Promise<boolean> => {
    const errors: FormErrors = {}

    if (formState.game === '') {
      errors.game = 'Game field can not be empty'
    }

    if (formState.title === '') {
      errors.title = 'Title field can not be empty'
    }

    if (formState.body === '') {
      errors.body = 'Body field can not be empty'
    }

    if (formState.featuredImageUrl === '') {
      errors.featuredImageUrl = 'FeaturedImageUrl field can not be empty'
    } else if (
      !isValidImageUrl(formState.featuredImageUrl) ||
      !(await isReachable(formState.featuredImageUrl))
    ) {
      errors.featuredImageUrl =
        'FeaturedImageUrl must be a valid and reachable image URL'
    }

    if (formState.summary === '') {
      errors.summary = 'Summary field can not be empty'
    }

    if (formState.screenshotsUrls.length === 0) {
      errors.screenshotsUrls = ['Required at least one screenshot url']
    } else {
      for (let i = 0; i < formState.screenshotsUrls.length; i++) {
        const url = formState.screenshotsUrls[i]
        if (
          !isValidUrl(url) ||
          !isValidImageUrl(url) ||
          !(await isReachable(url))
        ) {
          if (!errors.screenshotsUrls)
            errors.screenshotsUrls = Array(formState.screenshotsUrls.length)

          errors.screenshotsUrls![i] =
            'All screenshot URLs must be valid and reachable image URLs'
        }
      }
    }

    if (
      formState.repost &&
      (!formState.originalAuthor || formState.originalAuthor === '')
    ) {
      errors.originalAuthor = 'Original author field can not be empty'
    }

    if (formState.tags === '') {
      errors.tags = 'Tags field can not be empty'
    }

    if (formState.downloadUrls.length === 0) {
      errors.downloadUrls = ['Required at least one download url']
    } else {
      for (let i = 0; i < formState.downloadUrls.length; i++) {
        const downloadUrl = formState.downloadUrls[i]
        if (!isValidUrl(downloadUrl.url)) {
          if (!errors.downloadUrls)
            errors.downloadUrls = Array(formState.downloadUrls.length)

          errors.downloadUrls![i] = 'Download url must be valid and reachable'
        }
      }
    }

    setFormErrors(errors)

    return Object.keys(errors).length === 0
  }

  return (
    <>
      {isPublishing && <LoadingSpinner desc='Publishing mod to relays' />}
      <GameDropdown
        options={gameOptions}
        selected={formState.game}
        error={formErrors.game}
        onChange={handleInputChange}
      />

      <InputField
        label='Title'
        placeholder='Return the banana mod'
        name='title'
        value={formState.title}
        error={formErrors.title}
        onChange={handleInputChange}
      />

      <InputField
        label='Body'
        type='richtext'
        placeholder="Here's what this mod is all about"
        name='body'
        value={formState.body}
        error={formErrors.body}
        onChange={handleInputChange}
      />

      <InputField
        label='Featured Image URL'
        description='We recommend to upload images to https://nostr.build/'
        type='text'
        inputMode='url'
        placeholder='Image URL'
        name='featuredImageUrl'
        value={formState.featuredImageUrl}
        error={formErrors.featuredImageUrl}
        onChange={handleInputChange}
      />
      <InputField
        label='Summary'
        type='textarea'
        placeholder='This is a quick description of my mod'
        name='summary'
        value={formState.summary}
        error={formErrors.summary}
        onChange={handleInputChange}
      />
      <CheckboxField
        label='This mod not safe for work (NSFW)'
        name='nsfw'
        isChecked={formState.nsfw}
        handleChange={handleCheckboxChange}
        type='stylized'
      />
      <CheckboxField
        label='This is a repost of a mod I did not create'
        name='repost'
        isChecked={formState.repost}
        handleChange={handleCheckboxChange}
        type='stylized'
      />
      {formState.repost && (
        <>
          <InputField
            label={
              <span>
                Created by:{' '}
                {<OriginalAuthor value={formState.originalAuthor || ''} />}
              </span>
            }
            type='text'
            placeholder="Original author's name, npub or nprofile"
            name='originalAuthor'
            value={formState.originalAuthor || ''}
            error={formErrors.originalAuthor || ''}
            onChange={handleInputChange}
          />
        </>
      )}
      <div className='inputLabelWrapperMain'>
        <div className='labelWrapperMain'>
          <label className='form-label labelMain'>Screenshots URLs</label>
          <button
            className='btn btnMain btnMainAdd'
            type='button'
            onClick={addScreenshotUrl}
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-32 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
            </svg>
          </button>
        </div>
        <p className='labelDescriptionMain'>
          We recommend to upload images to https://nostr.build/
        </p>
        {formState.screenshotsUrls.map((url, index) => (
          <Fragment key={`screenShot-${index}`}>
            <ScreenshotUrlFields
              index={index}
              url={url}
              onUrlChange={handleScreenshotUrlChange}
              onRemove={removeScreenshotUrl}
            />
            {formErrors.screenshotsUrls &&
              formErrors.screenshotsUrls[index] && (
                <InputError message={formErrors.screenshotsUrls[index]} />
              )}
          </Fragment>
        ))}
        {formState.screenshotsUrls.length === 0 &&
          formErrors.screenshotsUrls &&
          formErrors.screenshotsUrls[0] && (
            <InputError message={formErrors.screenshotsUrls[0]} />
          )}
      </div>
      <InputField
        label='Tags'
        description='Separate each tag with a comma. (Example: tag1, tag2, tag3)'
        placeholder='Tags'
        name='tags'
        value={formState.tags}
        error={formErrors.tags}
        onChange={handleInputChange}
      />
      <CategoryAutocomplete
        lTags={formState.lTags}
        LTags={formState.LTags}
        setFormState={setFormState}
      />
      <div className='inputLabelWrapperMain'>
        <div className='labelWrapperMain'>
          <label className='form-label labelMain'>Download URLs</label>
          <button
            className='btn btnMain btnMainAdd'
            type='button'
            onClick={addDownloadUrl}
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-32 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
            </svg>
          </button>
        </div>
        <p className='labelDescriptionMain'>
          You can upload your game mod to Github, as an example, and keep
          updating it there (another option is catbox.moe). Also, it's advisable
          that you hash your package as well with your nostr public key.
        </p>

        {formState.downloadUrls.map((download, index) => (
          <Fragment key={`download-${index}`}>
            <DownloadUrlFields
              index={index}
              url={download.url}
              hash={download.hash}
              signatureKey={download.signatureKey}
              malwareScanLink={download.malwareScanLink}
              modVersion={download.modVersion}
              customNote={download.customNote}
              onUrlChange={handleDownloadUrlChange}
              onRemove={removeDownloadUrl}
            />
            {formErrors.downloadUrls && formErrors.downloadUrls[index] && (
              <InputError message={formErrors.downloadUrls[index]} />
            )}
          </Fragment>
        ))}
        {formState.downloadUrls.length === 0 &&
          formErrors.downloadUrls &&
          formErrors.downloadUrls[0] && (
            <InputError message={formErrors.downloadUrls[0]} />
          )}
      </div>
      <div className='IBMSMSMBS_WriteAction'>
        <button
          className='btn btnMain'
          type='button'
          onClick={handlePublish}
          disabled={isPublishing}
        >
          Publish
        </button>
      </div>
    </>
  )
}
type DownloadUrlFieldsProps = {
  index: number
  url: string
  hash: string
  signatureKey: string
  malwareScanLink: string
  modVersion: string
  customNote: string
  onUrlChange: (index: number, field: keyof DownloadUrl, value: string) => void
  onRemove: (index: number) => void
}

const DownloadUrlFields = React.memo(
  ({
    index,
    url,
    hash,
    signatureKey,
    malwareScanLink,
    modVersion,
    customNote,
    onUrlChange,
    onRemove
  }: DownloadUrlFieldsProps) => {
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const { name, value } = e.target
      onUrlChange(index, name as keyof DownloadUrl, value)
    }

    return (
      <div className='inputWrapperMainWrapper'>
        <div className='inputWrapperMain'>
          <input
            type='text'
            className='inputMain'
            name='url'
            placeholder='Download URL'
            value={url}
            onChange={handleChange}
          />

          <button
            className='btn btnMain btnMainRemove'
            type='button'
            onClick={() => onRemove(index)}
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-32 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
            </svg>
          </button>
        </div>
        <div className='inputWrapperMain'>
          <div className='inputWrapperMainBox'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-96 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
            </svg>
          </div>
          <input
            type='text'
            className='inputMain'
            name='hash'
            placeholder='SHA-256 Hash'
            value={hash}
            onChange={handleChange}
          />
          <div className='inputWrapperMainBox'></div>
        </div>
        <div className='inputWrapperMain'>
          <div className='inputWrapperMainBox'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-96 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
            </svg>
          </div>
          <input
            type='text'
            className='inputMain'
            placeholder='Signature public key'
            name='signatureKey'
            value={signatureKey}
            onChange={handleChange}
          />
          <div className='inputWrapperMainBox'></div>
        </div>
        <div className='inputWrapperMain'>
          <div className='inputWrapperMainBox'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-96 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
            </svg>
          </div>
          <input
            type='text'
            className='inputMain'
            name='malwareScanLink'
            placeholder='Malware Scan Link'
            value={malwareScanLink}
            onChange={handleChange}
          />
          <div className='inputWrapperMainBox'></div>
        </div>
        <div className='inputWrapperMain'>
          <div className='inputWrapperMainBox'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-96 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
            </svg>
          </div>
          <input
            type='text'
            className='inputMain'
            placeholder='Mod version (1.0)'
            name='modVersion'
            value={modVersion}
            onChange={handleChange}
          />
          <div className='inputWrapperMainBox'></div>
        </div>
        <div className='inputWrapperMain'>
          <div className='inputWrapperMainBox'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-96 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
            </svg>
          </div>
          <input
            type='text'
            className='inputMain'
            placeholder='Custom note/message'
            name='customNote'
            value={customNote}
            onChange={handleChange}
          />
          <div className='inputWrapperMainBox'></div>
        </div>
      </div>
    )
  }
)

type ScreenshotUrlFieldsProps = {
  index: number
  url: string
  onUrlChange: (index: number, value: string) => void
  onRemove: (index: number) => void
}

const ScreenshotUrlFields = React.memo(
  ({ index, url, onUrlChange, onRemove }: ScreenshotUrlFieldsProps) => {
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      onUrlChange(index, e.target.value)
    }

    return (
      <div className='inputWrapperMain'>
        <input
          type='text'
          className='inputMain'
          inputMode='url'
          placeholder='We recommend to upload images to https://nostr.build/'
          value={url}
          onChange={handleChange}
        />
        <button
          className='btn btnMain btnMainRemove'
          type='button'
          onClick={() => onRemove(index)}
        >
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-32 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
          >
            <path d='M323.3 32.01H188.7C172.3 32.01 160 44.31 160 60.73V96.01H32C14.33 96.01 0 110.3 0 128S14.33 160 32 160H480c17.67 0 32-14.33 32-32.01S497.7 96.01 480 96.01H352v-35.28C352 44.31 339.7 32.01 323.3 32.01zM64.9 477.5C66.5 492.3 79.31 504 94.72 504H417.3c15.41 0 28.22-11.72 29.81-26.5L480 192.2H32L64.9 477.5z'></path>
          </svg>
        </button>
      </div>
    )
  }
)

type GameDropdownProps = {
  options: GameOption[]
  selected: string
  error?: string
  onChange: (name: string, value: string) => void
}

const GameDropdown = ({
  options,
  selected,
  error,
  onChange
}: GameDropdownProps) => {
  const [searchTerm, setSearchTerm] = useState('')
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')
  const inputRef = useRef<HTMLInputElement>(null)
  const isOptionClicked = useRef(false)

  const handleSearchChange = useCallback((value: string) => {
    setSearchTerm(value)
    _.debounce(() => {
      setDebouncedSearchTerm(value)
    }, 300)()
  }, [])

  const filteredOptions = useMemo(() => {
    if (debouncedSearchTerm === '') return []
    else {
      return options.filter((option) =>
        option.label.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
      )
    }
  }, [debouncedSearchTerm, options])

  return (
    <div className='inputLabelWrapperMain'>
      <label className='form-label labelMain'>Game</label>
      <p className='labelDescriptionMain'>
        Can't find the game you're looking for? You can temporarily publish the
        mod under '(Unlisted Game)' and later edit it with the proper game name
        once we add it.
      </p>
      <div className='dropdown dropdownMain'>
        <div className='inputWrapperMain inputWrapperMainAlt'>
          <input
            ref={inputRef}
            type='text'
            className='inputMain inputMainWithBtn dropdown-toggle'
            placeholder='This mod is for a game called...'
            aria-expanded='false'
            data-bs-toggle='dropdown'
            value={searchTerm || selected}
            onChange={(e) => handleSearchChange(e.target.value)}
            onBlur={() => {
              if (!isOptionClicked.current) {
                setSearchTerm('')
              }
              isOptionClicked.current = false
            }}
          />
          <button
            className='btn btnMain btnMainInsideField btnMainRemove'
            type='button'
            onClick={() => onChange('game', '')}
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='0 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z'></path>
            </svg>
          </button>
          <div className='dropdown-menu dropdownMainMenu dropdownMainMenuAlt'>
            <List
              height={500}
              width={'100%'}
              itemCount={filteredOptions.length}
              itemSize={35}
            >
              {({ index, style }) => (
                <div
                  style={style}
                  className='dropdown-item dropdownMainMenuItem'
                  onMouseDown={() => (isOptionClicked.current = true)}
                  onClick={() => {
                    onChange('game', filteredOptions[index].value)
                    setSearchTerm('')
                    if (inputRef.current) {
                      inputRef.current.blur()
                    }
                  }}
                >
                  {filteredOptions[index].label}
                </div>
              )}
            </List>
          </div>
        </div>
      </div>
      {error && <InputError message={error} />}
      <p className='labelDescriptionMain'>
        Note: Please mention the game name in the body text of your mod post
        (e.g., 'This is a mod for Game Name') so we know what to look for and
        add.
      </p>
    </div>
  )
}

interface CategoryAutocompleteProps {
  lTags: string[]
  LTags: string[]
  setFormState: (value: React.SetStateAction<ModFormState>) => void
}

export const CategoryAutocomplete = ({
  lTags,
  LTags,
  setFormState
}: CategoryAutocompleteProps) => {
  const flattenedCategories = getCategories()
  const initialCategories = lTags.map((name) => {
    const existingCategory = flattenedCategories.find(
      (cat) => cat.name === name
    )
    if (existingCategory) {
      return existingCategory
    } else {
      return { name, hierarchy: name, l: [name] }
    }
  })
  const [selectedCategories, setSelectedCategories] =
    useState<Categories[]>(initialCategories)
  const [inputValue, setInputValue] = useState<string>('')
  const [filteredOptions, setFilteredOptions] = useState<Categories[]>()

  useEffect(() => {
    const newFilteredOptions = flattenedCategories.filter((option) =>
      option.hierarchy.toLowerCase().includes(inputValue.toLowerCase())
    )
    setFilteredOptions(newFilteredOptions)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inputValue])

  const getSelectedCategories = (cats: Categories[]) => {
    const uniqueValues = new Set(
      cats.reduce<string[]>((prev, cat) => [...prev, ...cat.l], [])
    )
    const concatenatedValue = Array.from(uniqueValues)
    return concatenatedValue
  }
  const getSelectedHeirarchy = (cats: Categories[]) => {
    const heirarchies = cats.reduce<string[]>(
      (prev, cat) => [...prev, cat.hierarchy.replace(/ > /g, ':')],
      []
    )
    const concatenatedValue = Array.from(heirarchies)
    return concatenatedValue
  }
  const handleReset = () => {
    setSelectedCategories([])
    setInputValue('')
  }
  const handleRemove = (option: Categories) => {
    setSelectedCategories(
      selectedCategories.filter((cat) => cat.hierarchy !== option.hierarchy)
    )
  }
  const handleSelect = (option: Categories) => {
    if (!selectedCategories.some((cat) => cat.hierarchy === option.hierarchy)) {
      setSelectedCategories([...selectedCategories, option])
    }
    setInputValue('')
  }
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }
  const handleAddNew = () => {
    if (inputValue) {
      const newOption: Categories = {
        name: inputValue,
        hierarchy: inputValue,
        l: [inputValue]
      }
      setSelectedCategories([...selectedCategories, newOption])
      setInputValue('')
    }
  }

  useEffect(() => {
    setFormState((prevState) => ({
      ...prevState,
      ['lTags']: getSelectedCategories(selectedCategories),
      ['LTags']: getSelectedHeirarchy(selectedCategories)
    }))
  }, [selectedCategories, setFormState])

  return (
    <div className='inputLabelWrapperMain'>
      <label className='form-label labelMain'>Categories</label>
      <p className='labelDescriptionMain'>You can select multiple categories</p>
      <div className='dropdown dropdownMain'>
        <div className='inputWrapperMain inputWrapperMainAlt'>
          <input
            type='text'
            className='inputMain inputMainWithBtn dropdown-toggle'
            placeholder='Select some categories...'
            aria-expanded='false'
            data-bs-toggle='dropdown'
            value={inputValue}
            onChange={handleInputChange}
          />
          <button
            className='btn btnMain btnMainInsideField btnMainRemove'
            type='button'
            onClick={handleReset}
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='0 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z'></path>
            </svg>
          </button>

          <div className='dropdown-menu dropdownMainMenu dropdownMainMenuAlt'>
            {filteredOptions && filteredOptions.length > 0 ? (
              <List
                height={500}
                width={'100%'}
                itemCount={filteredOptions.length}
                itemSize={35}
              >
                {({ index, style }) => (
                  <div
                    style={style}
                    className='dropdown-item dropdownMainMenuItem'
                    onClick={() => handleSelect(filteredOptions[index])}
                  >
                    {capitalizeEachWord(filteredOptions[index].hierarchy)}
                    {selectedCategories.some(
                      (cat) =>
                        cat.hierarchy === filteredOptions[index].hierarchy
                    ) && (
                      <button
                        className='btn btnMain btnMainInsideField btnMainRemove'
                        onClick={() => handleRemove(filteredOptions[index])}
                      >
                        <svg
                          xmlns='http://www.w3.org/2000/svg'
                          viewBox='-32 0 512 512'
                          width='1em'
                          height='1em'
                          fill='currentColor'
                        >
                          <path d='M323.3 32.01H188.7C172.3 32.01 160 44.31 160 60.73V96.01H32C14.33 96.01 0 110.3 0 128S14.33 160 32 160H480c17.67 0 32-14.33 32-32.01S497.7 96.01 480 96.01H352v-35.28C352 44.31 339.7 32.01 323.3 32.01zM64.9 477.5C66.5 492.3 79.31 504 94.72 504H417.3c15.41 0 28.22-11.72 29.81-26.5L480 192.2H32L64.9 477.5z'></path>
                        </svg>
                      </button>
                    )}
                  </div>
                )}
              </List>
            ) : (
              <List height={500} width={'100%'} itemCount={1} itemSize={35}>
                {({ index, style }) => (
                  <div
                    style={style}
                    className='dropdown-item dropdownMainMenuItem'
                    onClick={handleAddNew}
                  >
                    {inputValue &&
                    !filteredOptions?.find(
                      (option) =>
                        option.hierarchy.toLowerCase() ===
                        inputValue.toLowerCase()
                    ) ? (
                      <>
                        Add "{inputValue}"
                        <button className='btn btnMain btnMainInsideField btnMainRemove'>
                          <svg
                            xmlns='http://www.w3.org/2000/svg'
                            viewBox='-32 0 512 512'
                            width='1em'
                            height='1em'
                            fill='currentColor'
                          >
                            <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
                          </svg>
                        </button>
                      </>
                    ) : (
                      <>No matches</>
                    )}
                  </div>
                )}
              </List>
            )}
          </div>
        </div>
      </div>
      {LTags.length > 0 && (
        <div className='IBMSMSMBSSCategories'>
          {LTags.map((hierarchy) => {
            const heirarchicalCategories = hierarchy.split(`:`)
            const categories = heirarchicalCategories
              .map<React.ReactNode>((c: string) => (
                <a className='IBMSMSMBSSCategoriesBoxItem'>
                  <p>{capitalizeEachWord(c)}</p>
                </a>
              ))
              .reduce((prev, curr) => [
                prev,
                <div className='IBMSMSMBSSCategoriesBoxSeparator'>
                  <p>&gt;</p>
                </div>,
                curr
              ])

            return (
              <div key={hierarchy} className='IBMSMSMBSSCategoriesBox'>
                {categories}
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}