import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import MinimalistView from '../assets/templates/ui-standard/MinimalistView.vue'
import DarkModeView from '../assets/templates/ui-standard/DarkModeView.vue'
import RetroView from '../assets/templates/ui-standard/RetroView.vue'
import ThreeDDesignView from '../assets/templates/ui-standard/ThreeDDesignView.vue'
import SkeuomorphicView from '../assets/templates/ui-standard/SkeuomorphicView.vue'
import MaterialView from '../assets/templates/ui-standard/MaterialView.vue'
import IOSDesignView from '../assets/templates/ui-standard/IOSDesignView.vue'
import FluentDesignView from '../assets/templates/ui-standard/FluentDesignView.vue'
import NeumorphismView from '../assets/templates/ui-standard/NeumorphismView.vue'
import GlassmorphismView from '../assets/templates/ui-standard/GlassmorphismView.vue'
import BrutalismView from '../assets/templates/ui-standard/BrutalismView.vue'
import CyberpunkView from '../assets/templates/ui-standard/CyberpunkView.vue'
import OrganicDesignView from '../assets/templates/ui-standard/OrganicDesignView.vue'
import PixelArtView from '../assets/templates/ui-standard/PixelArtView.vue'
import MorphismView from '../assets/templates/ui-standard/MorphismView.vue'
import AuroraView from '../assets/templates/ui-standard/AuroraView.vue'
import NeonView from '../assets/templates/ui-standard/NeonView.vue'
import SteampunkView from '../assets/templates/ui-standard/SteampunkView.vue'
import HolographicView from '../assets/templates/ui-standard/HolographicView.vue'
import GradientView from '../assets/templates/ui-standard/GradientView.vue'
import AntDesignView from '../assets/templates/ui-standard/AntDesignView.vue'
import ElementUIView from '../assets/templates/ui-standard/ElementUIView.vue'
import FlatView from '../assets/templates/ui-standard/FlatView.vue'
import NordicView from '../assets/templates/ui-standard/NordicView.vue'
import FuturisticView from '../assets/templates/ui-standard/FuturisticView.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/minimalist',
    name: 'minimalist',
    component: MinimalistView
  },
  {
    path: '/dark-mode',
    name: 'dark-mode',
    component: DarkModeView
  },
  {
    path: '/retro',
    name: 'retro',
    component: RetroView
  },
  {
    path: '/3d',
    name: 'ThreeD',
    component: ThreeDDesignView
  },
  {
    path: '/skeuomorphic',
    name: 'skeuomorphic',
    component: SkeuomorphicView
  },
  {
    path: '/material',
    name: 'material',
    component: MaterialView
  },
  {
    path: '/ios',
    name: 'IOSDesign',
    component: IOSDesignView
  },
  {
    path: '/fluent',
    name: 'FluentDesign',
    component: FluentDesignView
  },
  {
    path: '/neumorphism',
    name: 'neumorphism',
    component: NeumorphismView
  },
  {
    path: '/glassmorphism',
    name: 'glassmorphism',
    component: GlassmorphismView
  },
  {
    path: '/brutalism',
    name: 'Brutalism',
    component: BrutalismView
  },
  {
    path: '/cyberpunk',
    name: 'cyberpunk',
    component: CyberpunkView
  },
  {
    path: '/organic',
    name: 'Organic',
    component: OrganicDesignView
  },
  {
    path: '/pixel',
    name: 'PixelArt',
    component: PixelArtView
  },
  {
    path: '/morphism',
    name: 'Morphism',
    component: MorphismView
  },
  {
    path: '/aurora',
    name: 'aurora',
    component: AuroraView
  },
  {
    path: '/neon',
    name: 'Neon',
    component: NeonView
  },
  {
    path: '/steampunk',
    name: 'steampunk',
    component: SteampunkView
  },
  {
    path: '/holographic',
    name: 'Holographic',
    component: HolographicView
  },
  {
    path: '/gradient',
    name: 'Gradient',
    component: GradientView
  },
  {
    path: '/ant',
    name: 'AntDesign',
    component: AntDesignView
  },
  {
    path: '/element',
    name: 'ElementUI',
    component: ElementUIView
  },
  {
    path: '/flat',
    name: 'Flat',
    component: FlatView
  },
  {
    path: '/nordic',
    name: 'Nordic',
    component: NordicView
  },
  {
    path: '/futuristic',
    name: 'Futuristic',
    component: FuturisticView
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/'
  },
  {
    path: '/product-management',
    name: 'product-management',
    component: ProductManagement
  }
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }
    return { top: 0, behavior: 'smooth' }
  }
})

export default router