import { FC, useState } from 'react'
import { FormContainer, FormContent, FormFooter, FormHeader } from '@maks-it.com/webui-components'
import { ButtonComponent, FileUploadComponent } from '@maks-it.com/webui-components'
import { ApiRoutes, GetApiRoute } from '../AppMap'
import { deleteData, getBinary, getData, postFile } from '../axiosConfig'
import { addToast } from '@maks-it.com/webui-components'
import { extractFilenameFromHeaders, saveBinaryToDisk } from '@maks-it.com/webui-core'
import { downloadZip } from 'client-zip'
import { HelloWorldResponse } from '../models/agent/HelloWorldResponse'


const Utilities: FC = () => {

  const [files, setFiles] = useState<File[]>([])

  const hadnleTestAgent = () => {
    getData<HelloWorldResponse>(GetApiRoute(ApiRoutes.AGENT_TEST).route)
      .then((response) => {
        if (!response.ok || !response.payload) return

        addToast(response.payload.message, 'info')
      })
  }

  const handleUploadFiles = async () => {
    if (files.length === 0) {
      addToast('No files selected for upload', 'error')
      return
    }

    const zipBlob = await downloadZip(files).blob()
    const response = await postFile(
      GetApiRoute(ApiRoutes.FULL_CACHE_UPLOAD_POST).route,
      zipBlob,
      'file',
      'cache.zip'
    )
    if (!response.ok)
      return
    
    setFiles([])
    addToast('Files uploaded successfully', 'success')
  }

  const handleDownloadFiles = () => {
    getBinary(GetApiRoute(ApiRoutes.FULL_CACHE_DOWNLOAD_GET).route
    ).then((response) => {
      if (!response.ok || !response.payload) return

      const { data, headers } = response.payload
      const filename = extractFilenameFromHeaders(headers, 'cache.zip')
      saveBinaryToDisk(data, filename)
    })
  }

  const handleDestroyFiles = () => {
    deleteData(GetApiRoute(ApiRoutes.FULL_CACHE_DELETE).route)
      .then((response) => {
        if (!response.ok) return
        addToast('Cache files destroyed successfully', 'success')
      })
  }

  return <FormContainer>
    <FormHeader>Utilities</FormHeader>
    <FormContent>
      <div className={'grid grid-cols-12 gap-4 w-full'}>
        <ButtonComponent
          colspan={3}
          label={'Test agent'}
          buttonHierarchy={'warning'}
          onClick={hadnleTestAgent}
        />

        <span className={'col-span-9'}></span>

        <FileUploadComponent
          colspan={6}
          label={'Select cache files'}
          multiple={true}
          files={files}
          onChange={setFiles}
        />

        <ButtonComponent
          colspan={3}
          children={'Upload cache files'}
          buttonHierarchy={'primary'}
          onClick={handleUploadFiles}
        />

        <span className={'col-span-12'}></span>

        <ButtonComponent
          colspan={3}
          children={'Download cache files'}
          buttonHierarchy={'secondary'}
          onClick={handleDownloadFiles}
        />

        <ButtonComponent
          colspan={3}
          children={'Destroy cache files'}
          buttonHierarchy={'error'}
          onClick={handleDestroyFiles}
        />
      </div>
    </FormContent>
    <FormFooter />
  </FormContainer>
}

export { Utilities }