import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-next/dist/bootstrap-vue-next.css";

import {
  BContainer,
  BButton,
  BButtonGroup,
  BForm,
  BFormInput,
  BFormGroup,
  BFormSelect,
  BFormCheckbox,
  BFormCheckboxGroup,
  BFormTextarea,
  BFormRadio,
  BFormRadioGroup,
  BInput,
  BModal,
  BTable,
  BCard,
  BAlert,
  BRow,
  BCol,
  BNav,
  BNavItem,
  BNavbar,
  BNavbarBrand,
  BNavbarToggle,
  BNavItemDropdown,
  BNavbarNav,
  BDropdown,
  BDropdownText,
  BDropdownDivider,
  BDropdownGroup,
  BDropdownItem,
  BCollapse,
  BBadge,
  BCardTitle,
  BCardSubtitle,
  BAvatar,
  BTab,
  BTabs,
  BPlaceholder,
  BPlaceholderWrapper,
  BTableSimple,
  BSpinner,
  BCardText,
  BCardHeader,
  BCardBody,
  BCardGroup,
  BListGroupItem,
  BListGroup,
  BTh,
  BTr,
  BThead,
  BTd,
  BTbody,
  BTooltip,
  BOverlay,
  BProgress,
  vBTooltip,
  vBToggle,
  createBootstrap,
  BApp,
  BInputGroupText,
  BInputGroup,
  BAccordion,
  BAccordionItem,
  BPopover,
  BLink,
  BPlaceholderButton,
  vBModal,
} from "bootstrap-vue-next";
import type { App, Component, Directive } from "vue";

const components: Record<string, Component | object> = {
  BApp,
  BContainer,
  BButton,
  BButtonGroup,
  BForm,
  BFormInput,
  BFormGroup,
  BFormSelect,
  BFormCheckbox,
  BFormCheckboxGroup,
  BFormTextarea,
  BFormRadio,
  BFormRadioGroup,
  BInput,
  BModal,
  BTable,
  BCard,
  BCardText,
  BCardHeader,
  BCardBody,
  BCardGroup,
  BAlert,
  BRow,
  BCol,
  BNav,
  BNavItem,
  BNavbar,
  BNavbarBrand,
  BNavbarToggle,
  BNavItemDropdown,
  BNavbarNav,
  BDropdown,
  BDropdownText,
  BDropdownDivider,
  BDropdownGroup,
  BDropdownItem,
  BCollapse,
  BBadge,
  BCardTitle,
  BCardSubtitle,
  BAvatar,
  BTab,
  BTabs,
  BPlaceholder,
  BPlaceholderWrapper,
  BTableSimple,
  BSpinner,
  BListGroup,
  BListGroupItem,
  BTh,
  BTr,
  BThead,
  BTd,
  BTbody,
  BTooltip,
  BOverlay,
  BProgress,
  BInputGroupText,
  BInputGroup,
  BAccordion,
  BAccordionItem,
  BPopover,
  BLink,
  BPlaceholderButton,
};

const directives: Record<string, Directive> = {
  "b-tooltip": vBTooltip,
  "b-toggle": vBToggle,
  "b-modal": vBModal,
};

export default {
  install(app: App) {
    app.use(createBootstrap());
    Object.entries(components).forEach(([componentName, component]) => {
      app.component(componentName, component);
    });

    Object.entries(directives).forEach(([name, directive]) => {
      app.directive(name, directive);
    });
  },
};