// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable @typescript-eslint/no-loop-func */
import clsx from 'clsx'
import { Alert } from 'components/Alert'
import { Anchor } from 'components/Anchor'
import { AssetsPreview } from 'components/AssetsPreview'
import { Conditional } from 'components/Conditional'
import { TextInput } from 'components/forms/FormInput'
import { useInputState } from 'components/forms/FormInput.hooks'
import { MetadataModal } from 'components/MetadataModal'
import type { ChangeEvent } from 'react'
import { useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
import type { UploadServiceType } from 'services/upload'
import { naturalCompare } from 'utils/sort'

export type UploadMethod = 'new' | 'existing'

interface UploadDetailsProps {
  onChange: (value: UploadDetailsDataProps) => void
}

export interface UploadDetailsDataProps {
  assetFiles: File[]
  metadataFiles: File[]
  uploadService: UploadServiceType
  nftStorageApiKey?: string
  pinataApiKey?: string
  pinataSecretKey?: string
  uploadMethod: UploadMethod
  baseTokenURI?: string
  imageUrl?: string
}

export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
  const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
  const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
  const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
  const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
  const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
  const [refreshMetadata, setRefreshMetadata] = useState(false)

  const nftStorageApiKeyState = useInputState({
    id: 'nft-storage-api-key',
    name: 'nftStorageApiKey',
    title: 'NFT.Storage API Key',
    placeholder: 'Enter NFT.Storage API Key',
    defaultValue: '',
  })
  const pinataApiKeyState = useInputState({
    id: 'pinata-api-key',
    name: 'pinataApiKey',
    title: 'Pinata API Key',
    placeholder: 'Enter Pinata API Key',
    defaultValue: '',
  })
  const pinataSecretKeyState = useInputState({
    id: 'pinata-secret-key',
    name: 'pinataSecretKey',
    title: 'Pinata Secret Key',
    placeholder: 'Enter Pinata Secret Key',
    defaultValue: '',
  })

  const baseTokenUriState = useInputState({
    id: 'baseTokenUri',
    name: 'baseTokenUri',
    title: 'Base Token URI',
    placeholder: 'ipfs://',
    defaultValue: '',
  })

  const coverImageUrlState = useInputState({
    id: 'coverImageUrl',
    name: 'coverImageUrl',
    title: 'Cover Image URL',
    placeholder: 'ipfs://',
    defaultValue: '',
  })

  const selectAssets = (event: ChangeEvent<HTMLInputElement>) => {
    setAssetFilesArray([])
    setMetadataFilesArray([])
    if (event.target.files === null) return
    //sort the files
    const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
    //check if the sorted file names are in numerical order
    const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
    for (let i = 0; i < sortedFileNames.length; i++) {
      if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
        toast.error('The file names should be in numerical order starting from 1.')
        //clear the input
        event.target.value = ''
        return
      }
    }
    let loadedFileCount = 0
    const files: File[] = []
    let reader: FileReader
    for (let i = 0; i < event.target.files.length; i++) {
      reader = new FileReader()
      reader.onload = (e) => {
        if (!e.target?.result) return toast.error('Error parsing file.')
        if (!event.target.files) return toast.error('No files selected.')
        const assetFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
        files.push(assetFile)
      }
      reader.readAsArrayBuffer(event.target.files[i])
      reader.onloadend = () => {
        if (!event.target.files) return toast.error('No file selected.')
        loadedFileCount++
        if (loadedFileCount === event.target.files.length) {
          setAssetFilesArray(files.sort((a, b) => naturalCompare(a.name, b.name)))
        }
      }
    }
  }

  const selectMetadata = (event: ChangeEvent<HTMLInputElement>) => {
    setMetadataFilesArray([])
    if (event.target.files === null) return toast.error('No files selected.')
    if (event.target.files.length !== assetFilesArray.length) {
      event.target.value = ''
      return toast.error('The number of metadata files should be equal to the number of asset files.')
    }
    //sort the files
    const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
    //check if the sorted file names are in numerical order
    const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
    for (let i = 0; i < sortedFileNames.length; i++) {
      if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) {
        toast.error('The file names should be in numerical order starting from 1.')
        //clear the input
        event.target.value = ''
        return
      }
    }
    let loadedFileCount = 0
    const files: File[] = []
    let reader: FileReader
    for (let i = 0; i < event.target.files.length; i++) {
      reader = new FileReader()
      reader.onload = (e) => {
        if (!e.target?.result) return toast.error('Error parsing file.')
        if (!event.target.files) return toast.error('No files selected.')
        const metadataFile = new File([e.target.result], event.target.files[i].name, { type: 'application/json' })
        files.push(metadataFile)
      }
      reader.readAsText(event.target.files[i], 'utf8')
      reader.onloadend = () => {
        if (!event.target.files) return toast.error('No file selected.')
        loadedFileCount++
        if (loadedFileCount === event.target.files.length) {
          setMetadataFilesArray(files.sort((a, b) => naturalCompare(a.name, b.name)))
        }
      }
    }
  }

  const updateMetadataFileIndex = (index: number) => {
    setMetadataFileArrayIndex(index)
    setRefreshMetadata((prev) => !prev)
  }

  const updateMetadataFileArray = async (updatedMetadataFile: File) => {
    metadataFilesArray[metadataFileArrayIndex] = updatedMetadataFile
    console.log('Updated Metadata File:')
    console.log(JSON.parse(await metadataFilesArray[metadataFileArrayIndex]?.text()))
  }

  useEffect(() => {
    try {
      const data: UploadDetailsDataProps = {
        assetFiles: assetFilesArray,
        metadataFiles: metadataFilesArray,
        uploadService,
        nftStorageApiKey: nftStorageApiKeyState.value,
        pinataApiKey: pinataApiKeyState.value,
        pinataSecretKey: pinataSecretKeyState.value,
        uploadMethod,
        baseTokenURI: baseTokenUriState.value,
        imageUrl: coverImageUrlState.value,
      }
      onChange(data)
    } catch (error: any) {
      toast.error(error.message)
    }
  }, [
    assetFilesArray,
    metadataFilesArray,
    uploadService,
    nftStorageApiKeyState.value,
    pinataApiKeyState.value,
    pinataSecretKeyState.value,
    uploadMethod,
    baseTokenUriState.value,
    coverImageUrlState.value,
  ])

  useEffect(() => {
    setAssetFilesArray([])
    setMetadataFilesArray([])
    baseTokenUriState.onChange('')
    coverImageUrlState.onChange('')
  }, [uploadMethod])

  return (
    <div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
      <div className="flex justify-center">
        <div className="mt-3 ml-4 font-bold form-check form-check-inline">
          <input
            checked={uploadMethod === 'new'}
            className="peer sr-only"
            id="inlineRadio2"
            name="inlineRadioOptions2"
            onClick={() => {
              setUploadMethod('new')
            }}
            type="radio"
            value="New"
          />
          <label
            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
            htmlFor="inlineRadio2"
          >
            Upload assets & metadata
          </label>
        </div>
        <div className="mt-3 ml-2 font-bold form-check form-check-inline">
          <input
            checked={uploadMethod === 'existing'}
            className="peer sr-only"
            id="inlineRadio1"
            name="inlineRadioOptions1"
            onClick={() => {
              setUploadMethod('existing')
            }}
            type="radio"
            value="Existing"
          />
          <label
            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
            htmlFor="inlineRadio1"
          >
            Use an existing base URI
          </label>
        </div>
      </div>

      <div className="p-3 py-5 pb-8">
        <Conditional test={uploadMethod === 'existing'}>
          <div className="ml-3 flex-column">
            <p className="mb-5 ml-5">
              Though Stargaze&apos;s sg721 contract allows for off-chain metadata storage, it is recommended to use a
              decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
              <Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
                NFT.Storage
              </Anchor>{' '}
              or{' '}
              <Anchor className="font-bold text-plumbus hover:underline" href="https://www.pinata.cloud/">
                Pinata
              </Anchor>{' '}
              and upload your assets & metadata manually to get a base URI for your collection.
            </p>
            <div>
              <TextInput {...baseTokenUriState} className="w-1/2" />
            </div>
            <div>
              <TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
            </div>
          </div>
        </Conditional>
        <Conditional test={uploadMethod === 'new'}>
          <div>
            <div className="flex flex-col items-center px-8 w-full">
              <div className="flex justify-items-start mb-5 w-full font-bold">
                <div className="form-check form-check-inline">
                  <input
                    checked={uploadService === 'nft-storage'}
                    className="peer sr-only"
                    id="inlineRadio3"
                    name="inlineRadioOptions3"
                    onClick={() => {
                      setUploadService('nft-storage')
                    }}
                    type="radio"
                    value="nft-storage"
                  />
                  <label
                    className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
                    htmlFor="inlineRadio3"
                  >
                    Upload using NFT.Storage
                  </label>
                </div>

                <div className="ml-2 form-check form-check-inline">
                  <input
                    checked={uploadService === 'pinata'}
                    className="peer sr-only"
                    id="inlineRadio4"
                    name="inlineRadioOptions4"
                    onClick={() => {
                      setUploadService('pinata')
                    }}
                    type="radio"
                    value="pinata"
                  />
                  <label
                    className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
                    htmlFor="inlineRadio4"
                  >
                    Upload using Pinata
                  </label>
                </div>
              </div>

              <div className="flex w-full">
                <Conditional test={uploadService === 'nft-storage'}>
                  <TextInput {...nftStorageApiKeyState} className="w-full" />
                </Conditional>
                <Conditional test={uploadService === 'pinata'}>
                  <TextInput {...pinataApiKeyState} className="w-full" />
                  <div className="w-[20px]" />
                  <TextInput {...pinataSecretKeyState} className="w-full" />
                </Conditional>
              </div>
            </div>

            <div className="mt-6">
              <div className="grid grid-cols-2">
                <div className="w-full">
                  <Conditional
                    test={
                      assetFilesArray.length > 0 &&
                      metadataFilesArray.length > 0 &&
                      assetFilesArray.length !== metadataFilesArray.length
                    }
                  >
                    <Alert className="mt-4 ml-8 w-3/4" type="warning">
                      The number of assets and metadata files should match.
                    </Alert>
                  </Conditional>

                  <div>
                    <label
                      className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
                      htmlFor="assetFiles"
                    >
                      Asset Selection
                    </label>
                    <div
                      className={clsx(
                        'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
                        'rounded border-2 border-white/20 border-dashed',
                      )}
                    >
                      <input
                        accept="image/*, audio/*, video/*"
                        className={clsx(
                          'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                          'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
                        )}
                        id="assetFiles"
                        multiple
                        onChange={selectAssets}
                        type="file"
                      />
                    </div>
                  </div>

                  {assetFilesArray.length > 0 && (
                    <div>
                      <label
                        className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
                        htmlFor="metadataFiles"
                      >
                        Metadata Selection
                      </label>
                      <div
                        className={clsx(
                          'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
                          'rounded border-2 border-white/20 border-dashed',
                        )}
                      >
                        <input
                          accept="application/json"
                          className={clsx(
                            'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                            'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
                          )}
                          id="metadataFiles"
                          multiple
                          onChange={selectMetadata}
                          type="file"
                        />
                      </div>
                    </div>
                  )}

                  <MetadataModal
                    assetFile={assetFilesArray[metadataFileArrayIndex]}
                    metadataFile={metadataFilesArray[metadataFileArrayIndex]}
                    refresher={refreshMetadata}
                    updateMetadata={updateMetadataFileArray}
                  />
                </div>

                <Conditional test={assetFilesArray.length > 0}>
                  <AssetsPreview assetFilesArray={assetFilesArray} updateMetadataFileIndex={updateMetadataFileIndex} />
                </Conditional>
              </div>
            </div>
          </div>
        </Conditional>
      </div>
    </div>
  )
}