import { BSVersion } from 'shared/bs-version.interface';
import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import BSLogo from '../../../assets/images/apngs/bs-logo.png';
import { TabNavBar } from 'renderer/components/shared/tab-nav-bar.component';
import wipGif from "../../../assets/images/gifs/wip.gif"
import { BsmDropdownButton } from 'renderer/components/shared/bsm-dropdown-button.component';
import { BsmImage } from 'renderer/components/shared/bsm-image.component';
import { BSUninstallerService } from '../services/bs-uninstaller.service';
import { BSVersionManagerService } from '../services/bs-version-manager.service';
import { ModalExitCode, ModalService, ModalType } from '../services/modale.service';
import DefautVersionImage from "../../../assets/images/default-version-img.jpg";
import { BsDownloaderService } from 'renderer/services/bs-downloader.service';
import { IpcService } from 'renderer/services/ipc.service';
import { MapService } from 'renderer/services/maps.service';
import { LaunchSlide } from 'renderer/components/version-viewer/slides/launch/launch-slide.component';
import { ModsSlide } from 'renderer/components/version-viewer/slides/mods/mods-slide.component';

export function VersionViewer() {

    const bsUninstallerService = BSUninstallerService.getInstance();
    const bsVersionManagerService = BSVersionManagerService.getInstance();
    const modalService = ModalService.getInsance();
    const bsDownloaderService = BsDownloaderService.getInstance();
    const ipcService = IpcService.getInstance();
    const mapService = MapService.getInstance();

    const {state} = useLocation() as {state: BSVersion};
    const navigate = useNavigate();
    const [currentTabIndex, setCurrentTabIndex] = useState(0);

    const navigateToVersion = (version: BSVersion) => navigate(`/bs-version/${version.BSVersion}`, {state: version});
    const openFolder = () => ipcService.sendLazy("bs-version.open-folder", {args: state});
    const exportMaps = () => mapService.exportVersionMaps(state);
    const verifyFiles = () => bsDownloaderService.download(state, true);

    const uninstall = async () => {
        const modalCompleted = await modalService.openModal(ModalType.UNINSTALL, state)
        if(modalCompleted.exitCode === ModalExitCode.COMPLETED){
            bsUninstallerService.uninstall(state).then(() => {
                bsVersionManagerService.askInstalledVersions();
                const newVersionPage = bsVersionManagerService.getInstalledVersions()[0];
                navigateToVersion(newVersionPage);
            })
        }
    }

    const edit = () => {
        bsVersionManagerService.editVersion(state).then(newVersion => {
            if(!newVersion){ return; }
            navigateToVersion(newVersion);
        });
    }

    const clone = () => {
        bsVersionManagerService.cloneVersion(state).then(newVersion => {
            if(!newVersion){ return; }
            navigateToVersion(newVersion);
        });
    }


  return (
    <>
      <BsmImage className="absolute w-full h-full top-0 left-0 object-cover" image={state.ReleaseImg || DefautVersionImage} errorImage={DefautVersionImage}/>
      <div className="relative flex items-center flex-col w-full h-full text-gray-200 backdrop-blur-lg">
        <BsmImage className='relative object-cover h-28' image={BSLogo}/>
        <h1 className='relative text-4xl font-bold italic -top-3'>{state.name ? `${state.BSVersion} - ${state.name}` : state.BSVersion}</h1>
        <TabNavBar className='mt-3' tabsText={["misc.launch", "misc.maps", "misc.mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
        <div className='mt-2 w-full min-h-0 grow flex transition-transform duration-300 pt-3' style={{transform: `translate(${-(currentTabIndex * 100)}%, 0)`}}>
          <LaunchSlide version={state}/>
          <div className='shrink-0 w-full h-full flex justify-center'>
            <div className='p-4 bg-light-main-color-2 dark:bg-main-color-2 h-fit rounded-md'>
              <img src={wipGif} alt="" />
              <span className='block w-full text-center font-bold mt-2 text-gray-800 dark:text-white'>Work In Progress</span>
            </div>
          </div>
          <ModsSlide version={state}/>
        </div>
      </div>
      <BsmDropdownButton className='absolute top-5 right-5 h-9 w-9 bg-light-main-color-2 dark:bg-main-color-2 rounded-md' items={[
          {text: "pages.version-viewer.dropdown.open-folder", icon: "folder", onClick: openFolder},
          (!state.steam && {text: "pages.version-viewer.dropdown.verify-files", icon: "task", onClick: verifyFiles}),
          (!state.steam && {text: "Exporter les misc.maps", icon: "export", onClick: exportMaps}),
          (!state.steam && {text: "pages.version-viewer.dropdown.edit", icon: "edit", onClick: edit}),
          {text: "pages.version-viewer.dropdown.clone", icon: "copy", onClick: clone},
          (!state.steam && {text: "pages.version-viewer.dropdown.uninstall", icon:"trash", onClick: uninstall})
        ]}/>
    </>
  )
}