import VueMq from "vue-mq";
import {PartialDeep} from "type-fest";
import {UiKitOptions} from "./@types";
import InputComponent from "../src/components/forms/inputComponent/InputComponent.vue";
import ButtonComponent from "../src/components/buttonComponent/ButtonComponent.vue";
import Datepicker from "../src/components/datepicker/Datepicker.vue";
import DatepickerRange from "../src/components/datepicker/DatepickerRange.vue";
import DialogWrapper from "../src/components/dialogWrapper/DialogWrapper.vue";
import Popover from "../src/components/popover/Popover.vue";
import Tooltip from "../src/components/tooltip/Tooltip.vue";
import TableWrapper from "../src/components/tables/TableWrapper.vue";
import AutocompleteInput from "../src/components/forms/autocompleteComponent/AutocompleteInput.vue";
import CheckboxComponent from "../src/components/forms/checkboxComponent/CheckboxComponent.vue";
import RadioComponent from "../src/components/forms/radioComponent/RadioComponent.vue";
import FormComponent from "../src/components/forms/formComponent/FormComponent.vue";
import SingleSelect from "../src/components/forms/selectComponent/SingleSelect.vue";
import MultipleSelect from "../src/components/forms/selectComponent/MultipleSelect.vue";
import SvgIcon from "../src/components/icons/SvgIcon.vue";

export {
    InputComponent,
    ButtonComponent,
    Datepicker,
    DatepickerRange,
    DialogWrapper,
    Popover,
    Tooltip,
    TableWrapper,
    AutocompleteInput,
    CheckboxComponent,
    RadioComponent,
    FormComponent,
    SingleSelect,
    MultipleSelect,
    SvgIcon,
};

export default {
    install(Vue: any, options: PartialDeep<UiKitOptions> = {}) {
        this.setUpMq(Vue, options);
    },
    setUpMq(Vue: any, options: PartialDeep<UiKitOptions> = {}) {
        let mqOptions = {
            breakpoints: {
                extraSmall: 450 + 1,
                verySmall: 600 + 1,
                small: 767 + 1,
                vuetifyBreakpoint: 960 + 1,
                medium: 1023 + 1,
                large: 1279 + 1,
                notebook: 1439 + 1,
                extraLarge: 1534 + 1,
            },
        };
        if (options.mqOptions) {
            // @ts-ignore
            mqOptions = options.mqOptions;
        }
        Vue.use(VueMq, mqOptions);
    },
};