import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, md } from "vuetify/iconsets/md";
import { h } from "vue";
import 'vuetify/styles';

// Import all .vue icons and process them, so they can be used
// as $vuetify.icons.<iconname>
var icons = {};
var customAliases = {};
const modules = import.meta.glob("@/assets/icons/*.vue", { eager: true });
Object.keys(modules).map((path) => {
  // Remove"./"
  const parts = path.split("/");
  const iconName = parts[parts.length - 1].split(".")[0];
  icons[iconName] = { component: modules[path].default };
  customAliases["vuetify.icons." + iconName] = "custom:" + iconName;
});

const custom = {
  component: (props) => {
    const {
      icon,
      tag,
      ...rest
    } = props;
    const stringIcon = icon;
    if (icons[stringIcon]) {
      return h(tag, rest, [h(icons[stringIcon].component, { style: "width:100%;height:100%" })]);
    }
    return md.component(props);
  }
}

export default {
  install(app, ignoredOptions) {
    const options = {
      components,
      directives,
      icons: {
        defaultSet: "md",
        aliases: {
          ...aliases,
          ...customAliases,
        },
        sets: {
          md, custom,
        },
      },
      defaults: {
        global: {
          density: "comfortable",
        },
        VBtn: {
          variant: "flat",
        },
      },
      theme: {
        options: {
          customProperties: true,
        },
        dark: false,
        themes: {
          light: {
            colors: {
              error: "#ff5252",
            }
          },
        },
      },
    };
    const vuetify = createVuetify(options);
    app.use(vuetify);
    app.config.globalProperties.$vuetify = vuetify;
    app.$vuetify = vuetify;
  },
};
